Javascript原型链(二)

来源:互联网 发布:第九届网络攻防大赛 编辑:程序博客网 时间:2024/06/01 08:45

上一篇文章粗略的理解了一下什么是原型和原型链概念。这篇文章记录一下自己对创建对象的过程的深入理解。

一、new创建对象的过程

首先我们都知道javascript创建一个对象的方式可以是使用构造函数方式。比如:

<script type="text/javascript">    function Person(name,age){        this.name=name;        this.age=age;        // return this;    }    var p1=new Person("xiaoming",18);</script>

这是常见的使用构造函数创建一个对象。其中p1是通过传入参数的方式创建一个新的实例。那么它的背后的原理是通过new关键字进行创建的。我们从var p1=new Person("xiaoming",18); 这段代码开始。首先我们是定义一个变量p1保存属性值,当通过new这个关键字的时候,会回到Person()这个构造函数中,this代表的是创建空对象,当我传入的参数成功,那么默认会执行return this; 这个语句,其意思就是返回一个对象,返回之后再赋值给变量p1。
总的来说就是这样:

new Person() —– this变成空对象 —–return this返回结果 —-赋值p1

这就是构造函数创建实例的过程。


二、常见的构造函数的写法

var a={}      // 相当于var a = new Object()var array=[]  // 相当于var array = new Array()var function(){} //相当于var function = new Function(){}

所以function其实就是一个对象。如何判断某一个变量属于哪个构造函数,可使用 instanceof 关键字,代码如下:

<script type="text/javascript">    var a={}    var b={}    function Func(){}</script>

运行结果如下:
这里写图片描述


三、原型规则

所有引用类型(数组、对象、函数),都具有对象特性
所有引用类型(数组、对象、函数),都有一个__proto__指针,即隐式原型
所有的函数,都有一个prototype属性,属性值也是一个普通的对象,即显示原型
所有的引用类型(数组、对象、函数),__proto__指向它的构造函数的prototype属性值
当某一个对象没有其属性值时,会通过__proto__属性向上查找。

```<script type="text/javascript">    var a={}    var b={}    function Func(){}</script>

从上述的代码可知,a instanceof Object等于true,说明Object是对象a的原型。那么Object也是一个构造函数,函数都有一个prototype属性,按照上述的原型规则。

a.__proto__ === Object.prototype //true

这里写图片描述

针对于第四个规则,贴上代码:

function Foo(name){        this.name=name;    }    Foo.prototype.FooName=function(){        console.log('I am Foo!! ');    }    var f = new Foo('zhangsan');    f.HooName= function(){        console.log('I am Hoo!!')    }

当f这个对象找不到其方法时,会通过__proto__属性去向上查找(也就是根据原型构造函数的prototype属性去查找)。运行效果:
这里写图片描述

此时为了验证结果的正确性,也就是验证FooName并不是对象f的属性,我们可以使用hasOwnProperty这个方法,我们在后面添加一段代码。

var item;    for (item in f){        if(f.hasOwnProperty(item)){            console.log(item);        }    }

运行结果如图:
这里写图片描述

这就是原型链,如果上面没有就继续往上找。

原创粉丝点击