JS：原型鏈、原型鏈的查找、原型鏈的遮蔽效應、原型鏈的終點、關于陣列的原型鏈
一、原型鏈
1、原型鏈：
每個物件都可以有一個原型_proto_，這個原型還可以有它自己的原型，以此類推，形成一個原型鏈，查找特定屬性的時候，我們先去這個物件里去找，如果沒有的話就去它的原型物件里面去，如果還是沒有的話再去向原型物件的原型物件里去尋找… 這個操作被委托在整個原型鏈上，這個就是我們說的原型鏈了，
2 prototype和constructor
- prototype屬性，它是函式所獨有的，它是從一個函式指向一個物件，
- 每個函式都有一個原型物件，該原型物件有一個constructor屬性，指向創建物件的函式本身，
3.建構式的prototype屬性是它的實體的原型
function People(name, age, sex){
this.name = name;
this.age = age;
this.sex = sex;
}
//實體化
var xiaoming = new People('小明', 12, '男');
//測驗三角關系是否存在
console.log(xiaoming.__proto__ === People.prototype);
//true
二、原型鏈查找
JavaScript規定：實體可以打點訪問它的原型的屬性和方法，這被稱為“原型鏈查找”
function People(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
// 往原型上添加nationality屬性
People.prototype.nationality = '中國';
var xiaoming = new People('小明', 12, '男');
console.log(xiaoming.nationality); // 中國
console.log(xiaoming);
三、原型鏈遮蔽
function People(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
// 往原型上添加nationality屬性
People.prototype.nationality = '中國';
// 實體化
var xiaoming = new People('小明', 12, '男');
var tom = new People('湯姆', 10, '男');
tom.nationality = '美國';
console.log(xiaoming.nationality); // 中國
console.log(xiaoming);
console.log(tom.nationality); // 美國
//tom本身有nationality時，就不找原型上的nationality屬性了，原型鏈的遮蔽效應
//跟區域變數全域變數差不多
四、原型鏈的終點
People.prototype是物件，因為object是所有物件的建構式，那么這個物件就是object的實體，可以看做是object new出來的，構成了三角關系
那么小明就可以順著原型鏈尋找到定義在原型鏈終點的這個物件上的方法
function People(name, age){
this.name = name;
this.age = age;
}
var xiaoming = new People('小明', 12);
console.log(xiaoming.__proto__.__proto__ === Object.prototype); //true
console.log(Object.prototype.__proto__); // null 說明是原型鏈終點
var char = xiaoming.toString();
console.log(char);
console.log(Object.prototype.hasOwnProperty('hasOwnProperty')); //true
console.log(Object.prototype.hasOwnProperty('toString')); //true
//說明hasOwnProperty和toString都是定義在Object.prototype上的
五、關于陣列的原型鏈
var arr = [344, 45, 34, 23]; //一個普通陣列
console.log(arr.__proto__ === Array.prototype); // true
console.log(arr.__proto__.__proto__ === Object.prototype); // true
console.log(Array.prototype.hasOwnProperty('push')); // true
console.log(Array.prototype.hasOwnProperty('splice')); // true
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/401659.html
標籤：其他