js原型和原型链的理解是什么?

JavaScript011

js原型和原型链的理解是什么?,第1张

讲原型和原型链,如果是讲定义,那很是晦涩难懂,今天我们就通俗易懂的说说原型与原型链。还需要借助阮老师的“Javascript继承机制的设计思想”。

1,比如我们还要针对学生统计每个人的总分是多少,我们改造构造函数Person,构造函数上有个 prototype属性,这个属性就是这个构造函数的原型(显式原型),这个原型是函数特有,prototype对象默认有两个属性,constructor属性和__proto__属性。

2,constructor,这个属性包含了一个指针,指回原构造函数。通过控制台输出,我们可以看到我们实例化的对象,有个__proto__属性,这个属性就是隐式原型,这个__proto__是所有对象都有的属性。

3,由于JavaScript的一切都是对象(除undefined),又由于所有对象都有__proto__属性,__proto__又指向构造函数的prototype,当我们访问一个对象的属性时。

4,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样 一直找下去,也就是我们平时所说的原型链的概念。原型链,说明是链式,而不是环,说明有终点,它的终点是null。

1.原型是 function对象的一个属性,是构造函数构造出对象的公有祖先,而原型本身也是一个对象。

2.从原型的概念出发,我们可以用构造函数构造出的对象提取原型上的属性。

3.因为原型也是一个对象,所以原型本身对自己的属性有增删改查的权利。

4.对象如何知道自己的原型是谁,可以通过对象中的_ proto_ 属性查看,_ proto_ 属性存的就是对象的原型,他是作为对象与原型之间的连接。

5.构造函数构造的对象如何查看是谁构造出自己的,可以通过constructor属性

首先从原型的定义开始解释:

原型是function对象的一个属性,这句话如何理解?

1.function函数其实就是一个对象,当你构造出一个函数时,这个函数对象就有了自己隐式的属性,prototype就是其中的一个属性。

那么先构造出一个函数,在控制台查看,函数对象是否有prototype,并且prototype是否也是一个对象。

我们在控制台中给father的prototype属性添加name属性并赋值,看看是否有效?

给prototype添加属性后,并可以输出name的值。那么也是可以给prototype添加方法的。

给prototype添加say方法实现输出自己的name,执行say(),的确输出了'haha'

2.我们如何理解,prototype是构造函数构造出对象的公有祖先?

首先当构造出函数时prototype就成为了这个函数的属性,并且prototype也可以添加属性和方法,而构造函数构造出的对象能继承构造函数中的方法,且这个对象自身也能添加属性和方法?

那么问题来了?

当我查看对象的name属性时,对象并没有这个属性,那他就会自动去构造出自己的函数中去找是否有这个属性,那当构造函数也没这个属性时,他就会去自己的原型上查找是否有这个属性,如果原型上存在name属性,对象就会获取到这个属性并输出。

而这个获取到原型属性的过程,其实就是一种继承的方式。

举例:

1.prototype是function对象的一个属性;

2.prototype是构造函数构造出对象的公有祖先;

3.prototype也是一个对象。

从总结的第三点可以知道,prototype可以拥有自己的属性和方法,并有权进行增删改查,那么接下来展示prototype如何进行增删改查。

对Mom的prototype属性进行操作。

增:

给出你想要添加的属性,并赋值。

删:

delete

所以prototype对象的增删改查和普通对象的用法相同。

这里还需注意,prototype上的属性只能由自身操作,对象从prototype上获取到的属性进行操作后,并不会影响到prototype。

接下来解释对象的_ proto_ 属性(前后分别是两个_)

_ proto_ 属性里存的是对象的prototype

举例:

接下来解释constructor属性:

对象可以通过该属性查看构造出自己的函数

总结:

prototype是function对象的一个属性,是构造函数构造出的对象的公有祖先,他本身也是一个对象,所以他可以有自己的属性和方法,并对其进行增删改查的操作,对象没有权利修改prototype上的属性和方法。对象可以通过自己的_ proto_ 查看他的prototype,通过constructor查看构造出自己的函数。

简单来讲:构造函数是制作蛋糕的机器, 那么原型就是蛋糕的模子, 生成出来对象自然就是蛋糕啦用代码实现:

// 这个函数是制作蛋糕的机器functionMakeCake(buyer){this.buyer=buyer}// 我们选择一个9寸圆形的草莓蛋糕MakeCake.prototype={size:"9寸",shape:"圆形",taste:"草莓味 "}varstrawberryCake=newMakeCake("Jimmy")// 给jimmy做的草莓蛋糕出炉啦varstrawberryCake2=newMakeCake("Bob")// 再给Bob做一个// 我们选择一个12寸方形巧克力双层蛋糕模型MakeCake.prototype={size:"12寸",shape:"方形",taste:"巧克力",type:"双层的"}varchocolateCake=newMakeCake("Jimmy")// 给Jimmy做一个巧克力蛋糕 :)

那这个蛋糕制造机是怎么被生产出来的呢?制蛋糕的机器也是仿照一个模子通过一台机器制造机做出来的javascript内部有一个机器制造器叫做Function函数。而你可以把function CustomFunction(){...} 视为new Function(args, functionBody) 的语法糖。当你需要一台机器,你就可以使用new Function({...}),这个机器制造器Function就会按照一个默认的模子生产出一台机器。

要说明的是, 语法糖的说法并不是完全准确的,函数声明形式和new Function()不等价,new Function() 效率会低一些。

附一张原型链的图: 对象的__proto__属性指向它的原型

functionCat(name){this.name=name}varjetty=newCat()