原型链
__proto__和Object.getPrototypeOf(target): 对象的原型
__proto__是对象实例和它的构造函数之间建立的链接,它的值是:构造函数的`prototype。
也就是说:proto__的值是它所对应的原型对象,是某个函数的prototype
Object.getPrototypeOf(target)全等于__proto。
它是ES6的标准,兼容IE9,主流浏览器也都支持,MDN,本文将以Object.getPrototypeOf(target)指代__proto__。
不要再使用__proto__:
本段摘自阮一峰-ES6入门,具体解析请点击链接查看
-
__proto__属性没有写入 ES6 的正文,而是写入了附录。
-
原因是它本质上是一个内部属性,而不是一个正式的对外的 API,只是由于浏览器广泛支持,才被加入了 ES6。
-
标准明确规定,只有浏览器必须部署这个属性,其他运行环境不一定需要部署,而且新的代码最好认为这个属性是不存在的。
-
所以无论从语义的角度,还是从兼容性的角度,都不要使用这个属性,应该使用:Object.getPrototypeOf(target)(读操作)、Object.setPrototypeOf(target)(写操作)、Object.create(target)(生成操作)代替
构造函数是什么、它做了什么
出自《你不知道的js》:在js中, 实际上并不存在所谓的'构造函数',只有对于函数的'构造调用'。
上文一直提到构造函数,所谓的构造函数,实际上就是通过关键字new来调用的函数:
let newObj = new someFn() // 构造调用函数
Object.prototype.a = 'Object';
Function.prototype.a = 'Function';
function Person(){}
var child = new Person();
console.log(Person.a); //Function
console.log(child.a); //Object
console.log(child._proto_); //
console.log(child._proto_._proto_);
console.log(child._proto_._proto_.constructor);
console.log(child._proto_._proto_.constructor.constructor);
console.log(child._proto_._proto_.constructor.constructor.constructor);
VM322:6 Function
VM322:7 Object
VM322:8 {constructor: ƒ}constructor: ƒ Person()__proto__: Object
VM322:9 {a: "Object", constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, …}
VM322:10 ƒ Object() { [native code] }
VM322:11 ƒ Function() { [native code] }
VM322:12 ƒ Function() { [native code] }
初始化
Function()
new了Object()
出来。然后他们各自的.prototype
,也是各自new出来的。
这里面的指向有几个规则,也有几个特例:
规则
-
构造函数/对象,都是对象。
只要是对象,下面就有两个属性:
constructor
和__proto__
-
.constructor
:谁new的我 我就指谁。
这是用来记录谁是构造函数的 -
.__proto__
:谁new的我 我指他.prototype
顺着
constructor
找到爹,然后在下面找到他的.prototype
,指向他。这是用来记录,该去哪继承方法/属性的。
自己下面找不到方法/函数,就去
.__proto__
的指针地址里面找。
-
构造函数下面多一个属性,叫
.prototype
这只有构造函数才有,所以
Function.prototype
相当于Function().prototype
构造函数在出生的时候,同时会自动new一个对象出来,
.prototype
会指向这个对象这个对象,对于这个构造函数没啥用,主要是给new出来的孩子们用的。即其他对象找不到了方法/属性,就通过
.__proto__
找到这里,在这里面继续找。类似于存放给人继承的东西的地方
特例
Function()
非常特殊,几乎整个都是特例
-
Function()
可以看作是自己new了自己,因此.constructor
指的是自己,.__proto__
指的也是自己的.prototype
-
Function()
new出的Function.prototype
,是个函数而其他构造函数,new出来的都是对象。
-
Function.prototype.__proto__
应该是Function.prototype
才是呀,但是这样就变成死循环了,自己下面找不到的方法/属性,还是找不到所以就指向了
Object.prototype
,去继承了Object.prototype
的方法
-
Object.prototype.__proto__
,指向的是null
理应是指向
Object.prototype
的,但那样的话又死循环了,于是就让它指向null,他都没有的方法就全世界都没有了这下
Object.prototype
就变成了万物方法/属性之源了 -
由
Function
new出来的构造函数,它的.prototype
的.__proto__
,指向的是Objet.prototype
,这个下面再说感觉就是,遇到死循环不知道该继承谁,就去继承
object.prototype
然后Object.prototype.__proto__
就去继承null
console.log(Person.a)
// Function
// Person()下面找不到,沿着.__proto__找它爹Function.prototype,里面找到了a=Function,就是结果了。
console.log(child.a)
// Object
// child下面没有a,沿着.__proto__找爹,Person.prototype下面也没有a,再沿着Person.prototype.__proto__找爹,找到了Object.prototype下面有个a是Object,输出
console.log(child.__proto__)
// {constructor: Person()}
// 也就是Person.prototype
console.log(child.__proto__.__proto__)
// {constructor: Object()}
// 也就是Object.prototype
console.log(child.__proto__.__proto__.constructor)
// Object()
console.log(child.__proto__.__proto__.constructor.constructor)
// Function()
console.log(child.__proto__.__proto__.constructor.constructor.constructor)
// Function()
Object.prototype.a='Object'
Function.prototype.a = 'Function'
构造/new调用函数的时候做了什么:
- 创建一个全新的对象。
- 这个新对象的原型(Object.getPrototypeOf(target))指向构造函数的prototype对象。
- 该函数的this会绑定在新创建的对象上。
- 如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。
- 我们称这个新对象为构造函数的实例。
原型继承就是利用构造调用函数的特性:
SubType.prototype = new SuperType(); // 原型继承:SubType继承SuperType
SubType.prototype.constructor = SubType // 重新指定constructor指向 方便找到构造函数
// 挂载SuperType的this和prototype的属性和方法到SubType.prototype上
- 构造调用的第二点:将新对象的Object.getPrototypeOf(target)指向函数的prototype
- 构造调用的第三点:该函数的this会绑定在新创建的对象上。
- 新对象赋值给SubType.prototype
原型类型有个缺点:多个实例对引用类型的操作会被篡改。
因为每次实例化引用类型的数据都指向同一个地址,所以它们读/写的是同一个数据,当一个实例对其进行操作,其他实例的数据就会一起更改。
原型链是什么
来看个例子:
function foo() { }
const newObj = new foo() // 构造调用foo 返回一个新对象
const newObj.__proto__ = Object.getPrototypeOf(newObj) // 获取newObj的原型对象
newObj.__proto__ === foo.prototype // true 验证newObj的原型指向foo
const foo.__proto__ = Object.getPrototypeOf(foo.prototype) // 获取foo.prototype的原型
foo.__proto__ === Object.prototype // true foo.prototype的原型是Object.prototype
如果用以前的语法,从newObj查找foo的原型,是这样的:
newObj.__proto__.__proto__ // 这种关系就是原型链
可以用以下三句话来理解原型链:
- 每个对象都拥有一个原型对象: newObj的原型是foo.prototype。
- 对象的原型可能也是继承其他原型对象的: foo.prototype也有它的原型Object.prototype。
- 一层一层的,以此类推,这种关系就是原型链。
一个对象是否在另一个对象的原型链上
如果一个对象存在另一个对象的原型链上,我们可以说:它们是继承关系。
判断方式有两种,但都是根据构造函数的prototype是否在原型链上来判断的:
- instanceof: 用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置
语法:object instanceof constructor
let test = function () { }
let testObject = new test();
testObject instanceof test // true test.prototype在testObject的原型链上
testObject instanceof Function // false Function.prototype 不在testObject的原型链上
testObject instanceof Object // true Object.prototype在testObject的原型链上
- isPrototypeOf:测试一个对象是否存在于另一个对象的原型链上
语法:prototypeObj.isPrototypeOf(object)
let test = function () { }
let testObject = new test();
test.prototype.isPrototypeOf(testObject) // true test.prototype在testObject的原型链上
Object.prototype.isPrototypeOf(testObject) // true Object.prototype在testObject的原型链上
原型链的终点: Object.prototype
Object.prototype是原型链的终点,所有对象都是从它继承了方法和属性。
Object.prototype没有原型对象:
const proto = Object.getPrototypeOf(Object.prototype) // null
下面是两个验证例子,有疑虑的同学多写几个测试用例印证一下。
字符串原型链的终点:Object.prototype
let test = '由String函数构造出来的'
let stringPrototype = Object.getPrototypeOf(test) // 字符串的原型
stringPrototype === String.prototype // true 字符串的原型是String对象
Object.getPrototypeOf(stringPrototype) === Object.prototype // true String对象的原型是Object对象
函数原型链的终点:Object.prototype
let test = function () { }
let fnPrototype = Object.getPrototypeOf(test)
fnPrototype === Function.prototype // true test的原型是Function.prototype
Object.getPrototypeOf(Function.prototype) === Object.prototype // true
原型链用来做什么?
属性查找:
如果试图访问对象(实例instance)的某个属性,会首先在对象内部寻找该属性,直至找不到,然后才在该对象的原型(instance.prototype)里去找这个属性,以此类推
let test = '由String函数构造出来的'
let stringPrototype = Object.getPrototypeOf(test) // 字符串的原型
stringPrototype === String.prototype // true 字符串的原型是String对象
Object.getPrototypeOf(stringPrototype) === Object.prototype // true String对象的原型是Object对象
当你访问test的某个属性时,浏览器会进行以下查找:
- 浏览器首先查找test 本身
- 接着查找它的原型对象:String.prototype
- 最后查找String.prototype的原型对象:Object.prototype
- 一旦在原型链上找到该属性,就会立即返回该属性,停止查找。
- 原型链上的原型都没有找到的话,返回undefiend
这种查找机制还解释了字符串为何会有自带的方法: slice/split/indexOf等。
准确的说:
- 这些属性和方法是定义在String这个全局对象/函数上的。
- 字符串的原型指向了String函数的prototype。
- 之后通过查找原型链,在String函数的prototype中找到这些属性和方法。
拒绝查找原型链:
hasOwnProperty: 指示对象自身属性中是否具有指定的属性
语法:obj.hasOwnProperty(prop)
参数: prop 要查找的属性
返回值: 用来判断某个对象是否含有指定的属性的Boolean。
let test ={ 'OBKoro1': '扣肉' }
test.hasOwnProperty('OBKoro1'); // true
test.hasOwnProperty('toString'); // false test本身没查找到toString
这个API是挂载在object.prototype上,所有对象都可以使用,API会忽略掉那些从原型链上继承到的属性。
扩展
实例的属性
你知道构造函数的实例对象上有哪些属性吗?这些属性分别挂载在哪个地方?原因是什么?
function foo() {
this.some = '222'
let ccc = 'ccc'
foo.obkoro1 = 'obkoro1'
foo.prototype.a = 'aaa'
}
foo.koro = '扣肉'
foo.prototype.test = 'test'
let foo1 = new foo() // `foo1`上有哪些属性,这些属性分别挂载在哪个地方
foo.prototype.test = 'test2' // 重新赋值
- this.some:foo1对象的属性
通过构造调用foo的this指向foo1,所以this.some挂载在foo1对象下。
属性查找: foo1.some
foo1.some直接读取foo1的属性。
- foo1.test、foo1.a:foo1对象的原型
根据上文提到的:构造/new调用函数的时候会创建一个新对象(foo1),自动将foo1的原型(Object.getPrototypeOf(foo1))指向构造函数的prototype对象。
构造调用会执行函数,所以foo.prototype.a = 'aaaaa’也会执行,单就赋值这个层面来说写在foo外面和写在foo里面是一样的。
属性查找:foo1.test、foo1.a
- foo1本身没有找到,继续查找
- foo1的原型Object.getPrototypeOf(foo1)上找到了a和test,返回它们,停止查找。
- foo1.obkoro1和foo1.koro:返回undefined
静态属性: foo.obkoro1、foo.koro
函数在JS中是一等公民,它也是一个对象, 用来模拟类。
这两个属性跟foo1没有关系,它是对象foo上的两个属性(类似函数的:arguments/prototype/length等属性),称为静态属性。
它们只能通过foo.obkoro1和foo.koro来访问。
原型对象改变,原型链下游获取的值也会改变
上面那个例子中的foo1.test的值是什么?
foo.prototype.test = 'test'
let foo1 = new foo() // `foo1`上有哪些属性,这些属性分别挂载在哪个地方
foo.prototype.test = 'test2' // 重新赋值
foo1.test的值是test2,原因是:foo1的原型对象是Object.getPrototypeOf(foo1)存的指针,指向foo.prototype的内存地址,不是拷贝,每次读取的值都是当前foo.prototype的最新值。
原型/构造函数/实例
-
原型(prototype): 一个简单的对象,用于实现对象的 属性继承。可以简单的理解成对象的爹。在 Firefox 和 Chrome 中,每个JavaScript对象中都包含一个__proto__ (非标准)的属性指向它爹(该对象的原型),可obj.__proto__进行访问。
-
构造函数: 可以通过new来 新建一个对象 的函数。
-
实例: 通过构造函数和new创建出来的对象,便是实例。 实例通过__proto__指向原型,通过constructor指向构造函数。
//实例
const instance = new Object();
//原型
const prototype = Object.prototype;
实例.__proto__ === 原型
原型.constructor === 构造函数
构造函数.prototype === 原型
// 这条线其实是是基于原型进行获取的,可以理解成一条基于原型的映射线
// 例如:
// const o = new Object()
// o.constructor === Object --> true
// o.__proto__ = null;
// o.constructor === Object --> false
实例.constructor === 构造函数
参考链接
你不知道的JS