javascript那些事(1)

    最近看到winter(寒冬)老师的一篇博文,说的是js这类基于原型的继承与普通的基于类继承方式的差异。文章最后抛出几个有意思的小练习尝试的解决了下。

一般来说,创建一个对象有如下三个步骤:

    1. 构建一个新对象

    2. 把新对象的__proto__指向函数对象的共有对象属性:prototype

    3. 以新对象为this执行构造函数

Function.prototype.prop=1;
alert(Object.prop)
alert(Function.prop)
输出:1, 1

怎么理解呢?

首先应该知道,所有的constructor(构造器)的原型链模型:selfFunction.__proto__ ==> Function.prototype.__proto__==> Object.prototype


那么:

Object.prop ==> Object.__proto__.prop === Function.prototype.prop === 1

Function.prop ==> Function.__proto__.prop === Function.prototype.prop === 1

Object.prototype.prop=1;
alert(Object.prop)
alert(Function.prop)
同理:

Object.prop ==> Object.prototype.prop === 1

Function.prop ==> Function.__proto__.prop === Function.prototype.prop ==>Function.prototype.__proto__.prop === Object.prototype.prop === 1

Function.__proto__.prop=1;
alert(Object.prop)
alert(Function.prop)
推导:

Object.prop ==> Object.__proto__.prop === Function.prototype.prop === Function.__proto__.prop === 1

Function.prop == >Function.__proto__.prop === 1

Object和Function一样都是constructor所以他们的__proto__属性都指向Function.prototype。


function Class(){
}
Class.prototype=Class;
Class.__proto__.prop=1
alert((new Class).prop);

    这里new了一个对象然后访问其prop属性,根据之前说的构造对象的三个步骤,我们可以知道新对象的__proto__属性指向Class这个constructor的prototype,所以有:

var client = new Class;

client.prop ==>client.__proto__.prop === Class.prototype.prop ==> Class.prototype.__proto__.prop;

又因为Class.__proto__.prop = 1. 且,Class.prototype=== Class,==>Class.prototype.__proto__.prop === 1.

function Class(){}
Class.prototype=Class.__proto__;
Function.prototype.prop=1;
alert((new Class()).prop)
基于上面几个推导过程,可以很快的得出结果:

(new Class()).prop ==> (new Class()).__proto__.prop === Class.prototype.prop === Class.__proto__.prop ==>

Function.proptype.prop === 1


function Class(){
}
Class.prototype.__proto__.prop=1;
Class.prototype=new Class;
alert((new Class).prop);
这个例子有点不好解释, 首先看看Class.prototype.__proto__.prop=1;这句做了什么,

 一个函数在声明之后,默认会得到自己的一个prototype属性,指向一个全新创建的Object,就跟{}一样。所以:

Class.prototype.__proto__ === Object.prototype //true,所以这一句实际上是对Object.prototype新增一个prop属性。


Class.prototype.__proto__.prop = 1;

var classProto = Class.prototype;

var classNewProto = Object.create(classProto, {});

classNewProto.__proto__ === classProto //true

Class.prototype = classNewProto;

var inst = Object.create(classProto, {});

so:

inst.__proto__ === classNewProto//true

inst.__proto__.__proto__ === classProto //true

inst.__proto.__proto__.__proto__ === Object.prototype//true

最后通过原型链在Object.prototype上找到了prop属性。










郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。