乐趣区

JavaScript-之-原型和原型链

jiezi

几个概念

  1. 构造函数：构造函数实际上是一个普通函数，通过 new 操作符，可以利用构造函数快速创建对象；
  2. prototype：每个构造函数自身上都会有一个 prototype 属性，该属性值为一个对象，这个对象具有一个 constructor 属性，constructor 指向构造函数自身；
  3. 实例：通过构造函数创建的对象，可以看做是该构造函数的实例；
  4. __proto__：通过构造函数创建的每个对象上面，都会有一个__proto__属性，该属性指向构造函数的 prototype；

什么是原型

在 JavaScript 中，每个对象会有一个原型对象。对象会从原型对象继承一些属性和方法。

什么是原型链

在 JavaScript 中，访问一个对象的属性时，JS 引擎会首先在该对象自身上线查找该属性。如果找到了，则直接返回该属性的值；如果没有找到，则会去改对象的原型上面继续查找。如果对象的原型上面也没有这个属性，则继续在原型对象的上原型上面查找，如此一级级继续往上，直到原型为 null，此时 JS 引擎返回该对象的属性值为 undefined。

继承 

        /**
         * two methods to implement inheritance;
        */

        function Base(type){this.type = type;}
        Base.prototype.base=function(){console.log(`${this.type} is in base func`);
        }
        // method one
        function Sub(type){this.type = type;}
        Sub.prototype = Object.create(new Base('base'));
        Sub.prototype.sub=function(){console.log(`${this.type} is in sub func`);
        }

        // method two
        function Foo(type){this.type = type;}
        Object.setPrototypeOf(Foo.prototype, new Sub('sub'));
        Foo.prototype.foo=function(){console.log(`${this.type} is in foo func`);
        }

        let sub = new Sub('sub1');
        sub.base();
        sub.sub();
        sub instanceof Sub; // true
        sub instanceof Base; // true

        let foo = new Foo('foo1');
        foo.base();
        foo.sub();
        foo.foo();
        foo instanceof Foo; // true
        foo instanceof Sub; // true
        foo instanceof Base; // true

一些实例

Object.getPrototype

预测下面几个表达式的结果 

Object.getPrototypeOf(function(){}).constructor === Function;
Object.getPrototypeOf(Function).constructor === Function;
Object.getPrototypeOf(Object.getPrototypeOf(Function)).constructor === Object;

答案：

true;

如何创建一个没有任何原型的对象？

let obj = Object.create(null);
console.log(obj);

这篇 medium 上获得 8.6K 赞的文章 Prototypes in JavaScript 讲得很清楚了。

退出移动版