原型对象与原型链

准备找工作了,所以把js再温习一遍,今天刚好看到了原型,所以就记录一下。PS:原文章位置:http://www.cnblogs.com/onepixel/p/5024903.html

如果基本了解了原型对象与原型链,可以直接跳到最后面,

简单来说,要了解原型,首先得知道两个概念:函数对象 Function与普通

对象 Object ,在网上看到一句话,觉得很有意思,在Javascript中,万物皆对象,js里的对象大致分为两种,就是上面提到的函数对象 与普通对象。

那么,怎么区分两种对象呢?举例说明:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

function f1() {

    // todo

}

var f2 = function () {

    // todo

};

var f3 =new Function('x''console.log(x)');

 

var o1 = {};

var o2 =new Object();

var o3 =new f1();

 

console.log(

    typeof f1,

    typeof f2,

    typeof f3,

    typeof o1,

    typeof o2,

    typeof o3

);

> function function functionobject object object

 

f1  f2  f3  就是函数对象,o1  o2  o3就是普通对象,

简而言之,通过 function 创建的就是函数对象,其他是普通对象。

在 JS 中,每当创建一个函数对象 f1 时,该对象中都会内置一些属性,其中包括 prototype 和 __proto__, prototype 即原型对象,

注意:prototype 对 f1 是不可见的,也就是说,f1 不会查找 prototype 中的属性和方法。 

1

2

3

function f(){}

f.prototype.foo ="abc";

console.log(f.foo);// undefined

 

那么,prototype 有什么用呢? 其实 prototype 的主要作用就是继承。 通俗一点讲,prototype 中定义的属性和方法都是留给自己的 “后代” 用的,因此,子类完全可以访问prototype中的属性和方法。

于是乎,就有了原型链 __proto__ ,它存在于普通对象和函数对象中,它的作用就是引用父类的 prototype 对象,JS在通过 new 操作符创建一个对象的时候,通常会把父类的 prototype 赋值给新对象的 __proto__属性,这样就形成了一代代传承...

1

2

3

4

function f() {}

f.prototype.foo ="abc";

var obj =new f();

console.log(obj.foo);// abc

 

现在我们知道,obj中__proto__保存的是 f 的 prototype,那么 f 的 prototype 中的 __proto__ 中保存的是什么呢? 看下图:

如图所示,f.prototype 的 __proto__ 中保存的是 Object.prototype,Object.prototype 对象中也有 __proto__,而从输出结果看,Object.prototype.__proto__ 是 null,表示 obj 对象原型链的终结。如下图所示:

obj 对象拥有这样一个原型链以后,当 obj.foo 执行时,obj 会先查找自身是否有该属性,但不会查找自己的 prototype,当找不到foo时,obj 就沿着原型链依次去查找...

在上面的例子中,我们在f的 prototype 上定义了 foo 属性,这时 obj 就会在原型链上找到这个属性并执行。 

总结一下以上涉及到的重点:

  • 原型链的形成真正是靠__proto__ 而非prototype,当JS引擎执行对象的方法时,先查找对象本身是否存在该方法,如果不存在,会在原型链上查找,但不会查找自身的prototype。
  • 一个对象的 __proto__ 记录着自己的原型链,决定了自身的数据类型,改变 __proto__ 就等于改变对象的数据类型。
  • 函数的 prototype 不属于自身的原型链,它是创建子类的核心,决定了子类的数据类型,是连接子类原型链的桥梁。
  • 在原型对象上定义方法和属性,是为了被子类继承和使用。

这里有一个图示来说明prototype是如何工作的。这个对象的每一个实例(boss1, boss2, boss3)都有一个内部属性叫做__proto__,这个属性指向了它的构造器(Employee)的属性prototype。当你执行 getSalary或者addSalary的时候,这个对象会在它的__proto__找到并执行这个代码。注意这点:这里并没有代码的复制(和 Example DT8的图表作一下对比)。

js的Prototype属性 <wbr>解释及常用方法

 

 

图中有几个难点:

1.Function构造函数可以用Function.__proto__来访问Function.prototype. 这是因为Function构造函数的构造函数是他本身,作为实例化对象的角色来访问,可行。

2.任何函数都是函数,他都继承Function的所有属性和方法,而Function是内置的构造函数,也是对象,都是继承Object的所有属性和方法。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值