prototype 和 __proto__

76 阅读1分钟

prototype 和 __proto__

两者都是指向原型对象。

prototype 是构造函数的属性,每个函数都有 prototype 字段

__proto__ 是对象的属性,指向对应对象构造函数的 prototype

  1. 区别
  • prototype函数 才有的属性,切记,切记
  • \_\_proto\_\_ 是 每个对象 都有的属性

它不是一个规范属性,该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它。

__proto__属性已在ECMAScript 6语言规范中标准化,用于确保Web浏览器的兼容性,因此它未来将被支持。

它已被不推荐使用, 现在更推荐使用 Object.getPrototypeOf/Reflect.getPrototypeOf 和Object.setPrototypeOf/Reflect.setPrototypeOf。

注意:大多数情况下,__proto__可以理解为“构造器的原型”,即__proto__ === constructor.prototype

但是,,通过 Object.create()创建的对象有可能不是, Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__(改变对象默认的__proto__)。

      let obj ={};
      console.log("obj:", obj);
      console.log("obj.prototype:", obj.prototype);
      console.log("obj.__proto__:", obj.__proto__);
      console.log("====================================");
      function myFunc() {}
      console.log("myFunc.prototype:",myFunc.prototype);
      console.log("myFunc.__proto__:",myFunc.__proto__);

image.png

  1. __proto__ 指向
  • 字面量
    let obj = {};
    console.log("obj.__proto__:", obj.__proto__);
    console.log( obj.__proto__===obj.constructor.prototype);

image.png

  • 构造函数
      let objP = function() {};
      let obj = new objP();
      console.log("obj.__proto__:", obj.__proto__);
      console.log(obj.__proto__ === obj.constructor.prototype);

      let objO = new Object();
      console.log("objO.__proto__:", objO.__proto__);
      console.log(objO.__proto__ === objO.constructor.prototype);

image.png

  • Object.create()
      let a1 = { a: 1 };
      let a2 = Object.create(a1);
      console.log("a2.__proto__:",a2.__proto__); //Object {a: 1}
      console.log(a2.__proto__ === a1.constructor.prototype); //false
      let a3 = Object.create(a1.__proto__);
      console.log("a3.__proto__",a3.__proto__); 
      console.log(a3.__proto__ === a1.constructor.prototype); //true

image.png

参考: 作者:Kevin丶CK 链接:www.jianshu.com/p/3d756c5bb… 来源:简书