JavaScriptの高度な(二)構造関数とプロトタイプ、継承、ES 5の新しい配列方法
47918 ワード
JavaScriptプレミアム(二)
一、構造関数と原型
1、オブジェクトの三つの作成方法
2、静的メンバーおよびインスタンスメンバー静的メンバー:コンストラクション関数に追加された属性またはメソッド、コンストラクション関数自体でのみアクセス可能な属性またはメソッド インスタンスメンバー:インスタンスオブジェクトのみでアクセスできるプロパティまたはメソッド
3、構造関数モデルコンストラクション関数にメソッドを直接追加する欠点オブジェクトを作成するたびに、メモリ領域を繰り返し開き、リソースを浪費する .コンストラクション関数のプロトタイプprototype各関数のデフォルトにはpropotype属性があり、その値のデフォルトはprototypeオブジェクト上のオブジェクトのメソッドと属性であり、newコンストラクション関数()によって作成されたインスタンスオブジェクトによって が継承されます.注意:(1)関数であればprototype属性がデフォルトであるが、関数以外のオブジェクトが持たない(2)コンストラクション関数を定義する場合、共通のメソッドがプロトタイプオブジェクトに定義され、作成されたすべてのインスタンスによって を直接継承することができる.
4、対象モデル
[外部リンク画像の転送に失敗しました.ソースステーションに盗難防止チェーンのメカニズムがある可能性があります.画像を保存して直接アップロードすることをお勧めします(img-O 6 w 9 IGIo-1614155392507)(E:黒馬トレーニングフロントエンド基礎ケーストレーニング就職クラスノートJS高級JS高級翌日imagesimg 4.png)]
5、constructor構造関数オブジェクトプロトタイプ(proto)とコンストラクション関数(prototype)プロトタイプオブジェクトには、コンストラクション関数自体を指すため、コンストラクション関数と呼ばれるプロパティconstructorプロパティがあります. constructorは、主にオブジェクトがどのコンストラクション関数に参照されているかを記録するために使用され、プロトタイプオブジェクトを元のコンストラクション関数に再指向させることができる. 元のprototypeを上書きするオブジェクトを再構築する場合、constuctorプロパティは を手動で割り当てる必要があります.
6、原型チェーン
各インスタンスオブジェクトには、もう1つの__があります.proto__属性は、コンストラクション関数のプロトタイプオブジェクトを指し、コンストラクション関数のプロトタイプオブジェクトもオブジェクトであり、_proto__プロパティは、このように1層1層上を探すとプロトタイプチェーンを形成します.
[外部リンク画像の転送に失敗しました.ソースステーションに盗難防止チェーンがある可能性があります.画像を保存して直接アップロードすることをお勧めします(img-c 4 q 8 gDGJ-161455392508)(E:黒馬トレーニングフロントエンド基礎ケーストレーニング就職クラスノートJS高級JS高級翌日imagesimg 5.png)]
プロトタイプチェーン理解(面接でよく聞く)
各インスタンスオブジェクト(object)には、protoと呼ばれるプライベート属性があり、そのコンストラクション関数を作成するプロトタイプオブジェクト(prototype)を指します.このプロトタイプオブジェクトにも独自のプロトタイプオブジェクト(proto)があり、1つのオブジェクトのプロトタイプオブジェクトがnullになるまで階層的に上に移動します.
7、プロトタイプチェーンとメンバーの検索メカニズム
オブジェクトがプロパティにアクセスするときは、プロトタイプチェーンの順序に従います.
(1)オブジェクトの属性にアクセスするときは,まずそのオブジェクト自身から検索する.
(2)見つからない場合はプロトタイプオブジェクト(proto)から検索する
(3)まだ見つかっていない場合は、最後尾のnullまでオブジェクトのプロトタイプチェーンに沿って上を検索し続けます.
8.プロトタイプオブジェクトのthisの方向
コンストラクション関数のthisとプロトタイプオブジェクトのthisは、newから出てきたインスタンスオブジェクトを指します.
9、プロトタイプチェーンの応用:内蔵オブジェクトのカスタム方法を広げる
プロトタイプオブジェクト上のメソッドを拡張する場合、元のプロトタイプオブジェクトを直接上書きすることはできません.メソッドの追加または変更のみ注意:組み込みオブジェクト(たとえば、Object、Array、Function)上のプロトタイプオブジェクトは上書きできません.変更のみ許可されます.
二、継承
1、call()使用:fn.call([thisArg, arg1, arg2…]) の役割:関数を呼び出し、呼び出し時のthisの値 を指定します.パラメータ:thisArg関数のthisの指定値;arg 1,arg 2...オプションのパラメータリスト 戻り値:関数呼び出しの結果 注意:最初のパラメータthisArgがnull、undefinedを伝えない場合、デフォルトの関数内thisはwindow を指します.
2、サブコンストラクション関数親コンストラクション関数の属性を継承する親構造関数 を定義します.サブコンストラクタ を再定義するサブコンストラクタ親コンストラクタのプロパティを継承(callメソッドを使用)
3、借用原型オブジェクトの継承方法親構造関数 を定義します.サブコンストラクタ を再定義するサブコンストラクタ親コンストラクタのプロパティを継承(callメソッドを使用)
4、類の本質コンストラクタのデフォルトには、オブジェクト の値を持つprototypeプロパティがあります.コンストラクション関数prototypeプロパティの下にconstructorとprotoの2つのデフォルトのプロパティ があります.構造関数はprototypeにメソッドを追加することによって、すべてのインスタンス継承 を実現することができる.コンストラクション関数によって作成されたインスタンス上_proto__コンストラクション関数を作成するprototype へ classクラスの本質は実は改造版の構造関数 である.
三、ES 5新規配列方法
1、配列方法forEach遍歴配列パラメータ:callback(要素、インデックス、配列自体) 戻り値: なし例:forEachを用いて配列和 を求める
2、filter()メソッド配列から条件を満たすすべての要素をフィルタするパラメータ:callback(要素、インデックス、配列自体) 戻り値:新しい配列 例:filterフィルタ配列内のすべての偶数 を使用する
3、some()メソッド配列に条件を満たす要素があるかどうかを検索するパラメータ:callback(要素、インデックス、配列自体) 戻り値:true(見つかった)|false(見つからない)
4、every()メソッド配列内のすべての要素が条件に合致しているかどうかを検索するパラメータ:callback(要素、インデックス、配列自体) 戻り値:true‖false(1つが満たされない限りfalseを返す)
5、trimメソッド文字列の両端のスペースを除去する
6、オブジェクトの属性名を取得する
Object.keys(オブジェクト)現在のオブジェクトに取得されたプロパティ名戻り値は、すべての属性名からなる配列 である.
7、Object.defineProperty()メソッドの役割:オブジェクトに新しい属性を定義するか、元の属性を変更し、オブジェクト に戻る使用方法:Object.defineProperty(obj,prop,descriptor)(1)obj:属性を定義するオブジェクト(2)prop:定義または変更する属性の名前、文字列「name」(3)descriptor:定義または変更する属性記述子、データフォーマットはオブジェクト{} 属性の記述子:(1)value:属性値(2)writable:変更可能かどうか(3)enumerable:列挙可能かどうか(4)configurable:属性を削除または再変更できるかどうか3つの属性記述子のデフォルトはfalse です.
一、構造関数と原型
1、オブジェクトの三つの作成方法
//
function People(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.say = function() {
console.log('hello');
}
}
var a = new People(' ', 13, ' ');
console.log(a);
//
var obj = {
name: ' ',
age: 12
};
// new Object()
var obj2 = new Object();
obj2.name = ' ';
obj2['age'] = 12;
console.log(obj2);
2、静的メンバーおよびインスタンスメンバー
function People(uname, age, sex) {
this.uname = uname;
this.age = age;
this.sex = sex;
this.say = function() {
console.log('hello');
}
}
var a = new People(' ', 13, ' ');
// 1. :
console.log(a.uname);
console.log(People.uname); //undefined , uname People
// 2. : ，
People.height = 'height';
console.log(a.height); //undefined , height a
console.log(People.height);
3、構造関数モデル
function Student(uname, age) {
this.uname = name;
this.age = age;
}
// propotype ,
Student.prototype.sing = function() {
console.log(' ');
}
Student.prototype.study = ' JS';
var xm = new Student(' ', 15);
// prototype
console.log(xm.study);
xm.sing();
var obj = {
a: 1
};
// console.log(obj.prototype); //
4、対象モデル
__proto__ , ,
__proto__ ， __proto__
， __proto__
[外部リンク画像の転送に失敗しました.ソースステーションに盗難防止チェーンのメカニズムがある可能性があります.画像を保存して直接アップロードすることをお勧めします(img-O 6 w 9 IGIo-1614155392507)(E:黒馬トレーニングフロントエンド基礎ケーストレーニング就職クラスノートJS高級JS高級翌日imagesimg 4.png)]
5、constructor構造関数
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
// , constructor
Star.prototype = {
// , , constructor
constructor: Star, //
sing: function() {
console.log(' ');
},
movie: function() {
console.log(' ');
}
}
var zxy = new Star(' ', 19);
console.log(zxy)
6、原型チェーン
各インスタンスオブジェクトには、もう1つの__があります.proto__属性は、コンストラクション関数のプロトタイプオブジェクトを指し、コンストラクション関数のプロトタイプオブジェクトもオブジェクトであり、_proto__プロパティは、このように1層1層上を探すとプロトタイプチェーンを形成します.
[外部リンク画像の転送に失敗しました.ソースステーションに盗難防止チェーンがある可能性があります.画像を保存して直接アップロードすることをお勧めします(img-c 4 q 8 gDGJ-161455392508)(E:黒馬トレーニングフロントエンド基礎ケーストレーニング就職クラスノートJS高級JS高級翌日imagesimg 5.png)]
プロトタイプチェーン理解(面接でよく聞く)
各インスタンスオブジェクト(object)には、protoと呼ばれるプライベート属性があり、そのコンストラクション関数を作成するプロトタイプオブジェクト(prototype)を指します.このプロトタイプオブジェクトにも独自のプロトタイプオブジェクト(proto)があり、1つのオブジェクトのプロトタイプオブジェクトがnullになるまで階層的に上に移動します.
7、プロトタイプチェーンとメンバーの検索メカニズム
オブジェクトがプロパティにアクセスするときは、プロトタイプチェーンの順序に従います.
(1)オブジェクトの属性にアクセスするときは,まずそのオブジェクト自身から検索する.
(2)見つからない場合はプロトタイプオブジェクト(proto)から検索する
(3)まだ見つかっていない場合は、最後尾のnullまでオブジェクトのプロトタイプチェーンに沿って上を検索し続けます.
8.プロトタイプオブジェクトのthisの方向
コンストラクション関数のthisとプロトタイプオブジェクトのthisは、newから出てきたインスタンスオブジェクトを指します.
// this window
// this
var that;
function Student(uname, age) {
// this
this.uname = name;
this.age = age;
}
// propotype ,
Student.prototype.sing = function() {
that = this;
console.log(' ');
}
Student.prototype.sleep = function() {
console.log(this === Student.prototype);
console.log(' ');
}
var xm = new Student(' ', 15);
xm.sing();
console.log(that === xm);
// sing this Student.prototype
Student.prototype.sleep();
9、プロトタイプチェーンの応用:内蔵オブジェクトのカスタム方法を広げる
var arr = [1, 2, 3]
console.log(arr.__proto__ === Array.prototype);
arr.push(4);
// 1. ： Array ，
Array.prototype.getSum = function() {
console.log(this); // arr=[1,2,3,4]
var sum = 0;
for (var i = 0; i < this.length; i++) {
sum += this[i];
}
return sum;
}
console.log(arr.getSum());
プロトタイプオブジェクト上のメソッドを拡張する場合、元のプロトタイプオブジェクトを直接上書きすることはできません.メソッドの追加または変更のみ注意:組み込みオブジェクト(たとえば、Object、Array、Function)上のプロトタイプオブジェクトは上書きできません.変更のみ許可されます.
二、継承
1、call()
2、サブコンストラクション関数親コンストラクション関数の属性を継承する
// : call() this this
function People(name, age) {
console.log(this); //this
this.name = name;
this.age = age;
}
function Student(name, age) {
// this
People.call(this, name, age);
}
var xm = new Student(' ', 15);
console.log(xm);
3、借用原型オブジェクトの継承方法
// : , prototype
function People(name, age) {
console.log(this); //this
this.name = name;
this.age = age;
};
People.prototype.say = function() {
console.log('hello');
};
function Student(name, age, subject) {
// this
People.call(this, name, age);
this.subject = subject;
};
// ：
// (1) , ，
Student.prototype = People.prototype;
// 2） ，
var obj = {
constructor: Student, // constructor
__proto__: People.prototype, // ， ；
}
Student.prototype = obj;
// (3)
Student.prototype = new People();
Student.prototype.constructor = Student;
//
Student.prototype.sleep = function() {
console.log(' ');
}
var xm = new Student(' ', 15, ' ');
xm.say(); //xm ；
console.log(xm);
console.log(People.prototype); //
console.log(xm.constructor); // xm
4、類の本質
三、ES 5新規配列方法
1、配列方法forEach遍歴配列
var arr = [10, 12, 55, 13]
arr.forEach(function(item, index, arr) {
console.log(' ：' + index + '===>' + ' :' + item);
})
2、filter()メソッド配列から条件を満たすすべての要素をフィルタする
var arr2 = [1, 2, 3, 4, 5, 6];
var newArr = arr2.filter(function(item,index) {
// return ，
return item % 2 == 0;
})
console.log(newArr);
3、some()メソッド配列に条件を満たす要素があるかどうかを検索する
var arr = ['hello', '12', ' ', 'true', '']
var a = arr.some(function(item, index){
return item == '';
})
console.log(a);
4、every()メソッド配列内のすべての要素が条件に合致しているかどうかを検索する
var arr3 = [30, 22, 45, 16, 20];
var b = arr3.every(function(item, index) {
return item > 20;
})
console.log(b);
// Array.prototype;
console.log(arr3.__proto__ === Array.prototype); //true
5、trimメソッド文字列の両端のスペースを除去する
var str = ' hello '
console.log(str.trim()） //hello
var str1 = ' he l l o '
console.log(str.trim()） //he l l o
6、オブジェクトの属性名を取得する
Object.keys(オブジェクト)現在のオブジェクトに取得されたプロパティ名
var obj = {
a: 1,
b: 2,
c: 3
};
for (var key in obj) {
console.log(obj[key]);
}
// 1. Object.keys()
// ：
var res = Object.keys(obj);
console.log(res);
// 2.
res.forEach(function(item) {
console.log(item); //
console.log(obj[item]); // ， ， []
})
7、Object.defineProperty()メソッド
var obj = {
name: ' ',
age: '12',
gender: 'man'
}
Object.defineProperty(obj, 'height', {
value: '170',
writable: true, //
enumerable: true, //
configurable: true //
})
obj.height = '175';
console.log(Object.keys(obj));
// delete；
delete obj.height;
console.log(obj.height);