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>

posted on 2020-01-21 11:33  冲啊!  阅读(309)  评论(0编辑  收藏  举报

导航