JS原型对象的理解与思考

一、__proto__的重要知识点

1.__proto__ 与内部的 [[Prototype]] 不一样。__proto__ 是 [[Prototype]] 的 getter/setter。

一般情况下对象的__proto__属性指向创建该对象的构造函数的原型对象。

2.由于__proto__是内部属性不是一个真正对外的API，只有浏览器必须部署此属性其他环境不一定要部署。从兼容等方面考虑许多人不建议使用此属性而推荐使用setPrototypeOf、getPrototypeOf、create来代替。
3. __proto__是对象的具有的属性（函数也是对象），而prototype只有函数对象才有，该属性指向该函数的原型对象。
4. 由__proto__组成的复杂关系叫原型链，这条链的用处就是当你访问某个对象的某属性时，如果这个对象不存在这个属性，那就会去__proto__里面去找，如果找不到，则去__proto__的__proto__里面去找，最终会找到null那里，如果还是找不到，则返回undefind作用就是放在原型的东西可以直接取。
5. 原型链不会无限循环，它最终指向的是null。引用不能形成闭环，如果我们试图在一个闭环中分配 __proto__，JavaScript 会抛出错误。
6. 函数对象Function.prototype的__proto__指向的不是自己，而是Object.prototype，它最终指向的也是null。

7. __proto__ 的值可以是对象，也可以是 null。而其他的类型都会被忽略。

二、与原型相关的一些方法：

1.Object.setPrototypeOf

第一个参数不是对象则会返回第一个参数，undefined/null无法转为对象会报错：

Object.setPrototypeOf(1,{})   // 1
Object.setPrototypeOf('123',{})   // 123
Object.setPrototypeOf(true,{})  // true
Object.setPrototypeOf(undefind/null,{}) //TypeError

2.Object.getPrototypeOf

当使用Object.setPrototypeOf设置指定对象的原型对象为null时，其__proto__为undefined而不是null

let o = {};
Object.setPrototypeOf(o,null);
o.__proto__ === Object.getPrototypeOf(o) // false (o.__proto__为undefined，而Object.getPrototypeOf(o) 为null)
__proto__ in o // false

三、思考

1.Object.prototype.__proto__的值是null还是undefined？

在js中，无论null还是undefined，都只是一个值，可以像123一样自由赋值给变量或对象属性。而当一个变量未赋值，或对象（及其原型链上）属性不存在时，返回的是undefined，不是null。

我们可以认为，.proto===null能够说明一定存在这个属性，而.proto===undefined则既可能是属性值就是undefined的情况，也可能是属性不存在的情况。你可能需要in或hasOwnProperty来检查是否存在一个属性。

对于Object.prototype.__proto __这个特定的属性而言，返回null表示这个对象没有原型、已经是最根的了。

2.为什么不要修改__proto__？

和Object.getPrototypeOf相比，_ proto _的特殊之处还体现在它能够修改一个对象的原型继承链。因为它是一个属性，除了执行获取它的操作外，还能够对它进行设置。

但是，绝不要修改__proto__。原因如下：

• 首先，最显而易见的原因就是便携性。因为不是所有的JavaScript执行环境都支持这一属性，所以使用了__proto__之后，代码就不能在那些不支持__proto__的环境中运行了。
• 其次，是性能上的考虑。现在的JavaScript引擎的实现都会针对对象属性的存取作出大量的优化，因为这些操作是最常用的。当修改了对象的__proto__ 后，就相当于修改了对象的整个继承结构，这样做会导致很多优化都不再可用。
• 最后，最重要的原因是需要保证程序的可靠性。因为改变__proto__ 属性后，对象的原型继承链也许会被完全地改变。当程序中有其他代码依赖于原来的继承链时，就会出现不可意料的错误。通常而言，原型继承链需要保持稳定。

当需要为一个新创建的对象赋予一个原型对象时，可以使用ES5提供的Object.create方法。对于未实现ES5标准的环境，可以给出来一个不依赖于__proto__的Object.create方法的实现：

3.解决__proto__兼容问题， 让构造函数不再依赖new关键字

在将function当做构造函数使用时，需要确保该函数是通过new关键字进行调用的。

function User(name, passwordHash) { 
 this.name = name; 
 this.passwordHash = passwordHash; 
} 

如果在调用上述构造函数时，忘记了使用new关键字，那么：

var u = User("张三", "12345"); 
u; // undefined 
this.name; // "张三" 
this.passwordHash; // "12345" 

可以发现得到的u是undefined，而this.name以及this.passwordHash则被赋了值。但是这里的this指向的则是全局对象。

如果将构造函数声明为依赖于strict模式：

function User(name, passwordHash) { 
 "use strict"; 
 this.name = name; 
 this.passwordHash = passwordHash; 
} 
var u = User("张三", "12345"); 
// error: this is undefined 

那么在忘记使用new关键字的时候，在调用this.name= name的时候会抛出TypeError错误。这是因为在strict模式下，this的默认指向会被设置为undefined而不是全局对象。

那么，是否有种方法能够保证在调用一个函数时，无论使用了new关键字与否，该函数都能够被当做构造函数呢？下面的代码是一种实现方式，使用了instanceof操作：

function User(name, passwordHash) { 
 if (!(this instanceof User)) { 
  return new User(name, passwordHash); 
 } 
 this.name = name; 
 this.passwordHash = passwordHash; 
} 

var x = User("张三", "12345"); 
var y = new User("张三", "12345"); 
x instanceof User; // true 
y instanceof User; // true 

以上的if代码块就是用来处理没有使用new进行调用的情况的。当没有使用new时，this的指向并不是一个User的实例，而在使用了new关键字时，this的指向是一个User类型的实例。

另一个更加适合在ES5环境中使用的实现方式如下：

function User(name, passwordHash) { 
 var self = this instanceof User ? this : Object.create(User.prototype); 
 self.name = name; 
 self.passwordHash = passwordHash; 
 return self; 
} 

Object.create方法是ES5提供的方法，它能够接受一个对象作为新创建对象的prototype。那么在非ES5环境中，就需要首先实现一个Object.create方法：

if (typeof Object.create === "undefined") { 
 Object.create = function(prototype) { 
  function C() { } 
  C.prototype = prototype; 
  return new C(); 
 }; 
} 

实际上，Object.create方法还有接受第二个参数的版本，第二个参数表示的是在新创建对象上赋予的一系列属性。
当上述的函数确实使用了new进行调用时，也能够正确地得到返回的新建对象。这得益于构造器覆盖模式(Constructor Override Pattern)。该模式的含义是：使用了new关键字的表达式的返回值能够被一个显式的return覆盖。正如以上代码中使用了return self来显式定义了返回值。
当然，以上的工作在某些情况下也不是必要的。但是，当一个函数是需要被当做构造函数进行调用时，必须对它进行说明，使用文档是一种方式，将函数的命名使用首字母大写的方式也是一种方式(基于JavaScript语言的一些约定俗成)。