今天的解读的源码是setprototypeof,源码地址https://github.com/wesleytodd/setprototypeof
'use strict'
/* eslint no-proto: 0 */
module.exports = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array ? setProtoOf : mixinProperties)
function setProtoOf (obj, proto) {
obj.__proto__ = proto
return obj
}
function mixinProperties (obj, proto) {
for (var prop in proto) {
if (!obj.hasOwnProperty(prop)) {
obj[prop] = proto[prop]
}
}
return obj
}
这段代码的作用是什么?
Polyfill for Object.setPrototypeOf
实现三条路径
- 优先使用:Object.setPrototypeOf
- 第二选择:proto
- 最后选择:遍历赋值
知识点一
({ __proto__: [] }) instanceof Array
- instanceof 用来查找对象的构造函数
- { __proto__: [] } 对象改变了原型链,也可能只是对象的key
知识点二
obj.__proto__ = proto
__proto__ 可以改变原型链指向
知识点三
!obj.hasOwnProperty(prop)
找出原型链上的属性
知识点已经罗列完毕,如何测试学习成果呢?
function Foo() {
}
Foo.prototype.hello = function() {
console.log('hello')
}
var foo1 = new Foo()
foo1.hello()
上方代码,通过new实现化了一个对象,那么不用new,不考虑兼容性,应该如何实现呢?
例如:
var foo2 = {}
foo2.__proto__ = Foo.prototype
foo2.hello()
var foo3 = Object.create(Foo.prototype, {})
foo3.hello()
更多方法不再提供,大家可以文章下方留言,一起讨论。
相关链接
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/instanceof
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/proto
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create