233 原型链【__proto__】,原型链和成员的查找机制
1.8 原型链
【通过所有对象的__proto__属性,形成原型链。】
每一个实例对象又有一个__proto__属性,指向的构造函数的原型对象,构造函数的原型对象也是一个对象,也有__proto__属性,这样一层一层往上找就形成了原型链。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
Star.prototype.sing = function() {
console.log('我会唱歌');
}
var ldh = new Star('刘德华', 18);
console.log(ldh.__proto__ === Star.prototype); // true
console.log(Star.prototype); // {sing: ƒ, constructor: ƒ}
// 1. 只要是对象就有__proto__ 原型, 指向原型对象
// 2.我们Star原型对象里面的__proto__原型指向的是 Object.prototype
console.log(Star.prototype.__proto__ === Object.prototype); // true
// 3. 我们Object.prototype原型对象里面的__proto__原型 指向为 null
console.log(Object.prototype.__proto__); // null
</script>
</body>
</html>
1.9 原型链和成员的查找机制
任何对象都有原型对象, 也就是prototype属性, 任何原型对象也是一个对象, 该对象就有__proto__属性,这样一层一层往上找,就形成了一条链,我们称此为原型链;
当访问一个对象的属性(包括方法)时,首先查找这个`对象自身`有没有该属性。
如果没有,就查找它的原型(也就是 __proto__指向的 `prototype 原型对象`)。
如果还没有,就查找原型对象的原型(`Object的原型对象`)。
依此类推,一直找到 Object 为止(`null`)。
__proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
Star.prototype.sing = function() {
console.log('我会唱歌');
}
Star.prototype.sex = '女';
// Object.prototype.sex = '男';
var ldh = new Star('刘德华', 18);
ldh.sex = '男';
console.log(ldh); // Star {uname: "刘德华", age: 18}
console.log(ldh.sex); // 男
console.log(ldh.__proto__ === Star.prototype); // true
console.log(ldh.prototype); // undefined
// console.log(ldh.prototype.__proto__); // Cannot read property '__proto__' of undefined
console.log(Star.prototype); // {sex: "女", sing: ƒ, constructor: ƒ}
console.log(Star.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype); // {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
console.log(Object.prototype.__proto__); // null
console.log(ldh.toString()); // [object Object]
</script>
</body>
</html>