关于js原型继承
来源:互联网 发布:顶级源码 编辑:程序博客网 时间:2024/05/29 17:34
博文地址:http://blog.jobbole.com/19795/
一、函数创建过程
在了解原型链之前我们先来看看一个函数在创建过程中做了哪些事情,举一个空函数的例子:
当我们在代码里面声明这么一个空函数,js解析的本质是(肤浅理解有待深入):
1、创建一个对象(有constructor属性及[[Prototype]]属性),根据ECMA,其中[[Prototype]]属性不可见、不可枚举
2、创建一个函数(有name、prototype属性),再通过prototype属性 引用 刚才创建的对象
3、创建变量A,同时把函数的 引用 赋值给变量A
如下图所示:
(注意图中都是“ 引用 ”类型)
每个函数的创建都经历上述过程。
二、构造函数
那么什么是构造函数呢?
按照ECMA的定义
Constructor is a function that creates and initializes the newly created object.
构造函数是用来新建同时初始化一个新对象的函数。
什么样的函数可以用来创建同时初始化新对象呢?答案是:任何一个函数,包括空函数。
所以,结论是:任何一个函数都可以是构造函数。
三、原型
根据前面空函数的创建图示,我们知道每个函数在创建的时候都自动添加了prototype属性,这就是函数的原型,从图中可知其实质就是对一个对象的引用(这个对象暂且取名原型对象)。
我们可以对函数的原型对象进行操作,和普通的对象无异!一起来证实一下。
围绕刚才创建的空函数,这次给空函数增加一些代码:
第7~9行代码就是给函数的原型对象增加一个say属性并引用一个匿名函数,根据“函数创建”过程,图解如下:
(灰色背景就是在空函数基础上增加的属性)
简单说原型就是函数的一个属性,在函数的创建过程中由js编译器自动添加。
那么原型有什么用呢?
先了解下new运算符,如下:
这是通过构造函数来创建对象的方式,那么创建对象为什么要这样创建而不是直接var a1 = {};
呢?这就涉及new的具体步骤了,这里的new操作可以分成三步(以a1的创建为例):
1、新建一个对象并赋值给变量a1:var a1 = {};
2、把这个对象的[[Prototype]]
属性指向函数A
的原型对象:a1.[[Prototype]] = A.prototype
3、调用函数A,同时把this
指向1中创建的对象a1
,对对象进行初始化:A.apply(a1,arguments)
其结构图示如下:
从图中看到,无论是对象a1还是a2,都有一个属性保存了对函数A
的原型对象的引用,对于这些对象来说,一些公用的方法可以在函数的原型中找到,节省了内存空间。
四、原型链
了解了new运算符以及原型的作用之后,一起来看看什么是[[Prototype]]?以及对象如何沿着这个引用来进行属性的查找?
在js的世界里,每个对象默认都有一个[[Prototype]]属性,其保存着的地址就构成了对象的原型链,它是由js编译器在对象 被创建 的时候自动添加的,其取值由new
运算符的右侧参数决定:当我们var object1 = {};
的时候,object1
的[[Prototype]]
就指向Object构造函数的原型对象,因为var object1 = {};
实质上等于var object = new Object();
(原因可参照上述对new A
的分析过程)。
对象在查找某个属性的时候,会首先遍历自身的属性,如果没有则会继续查找[[Prototype]]
引用的对象,如果再没有则继续查找[[Prototype]].[[Prototype]]
引用的对象,依次类推,直到[[Prototype]].….[[Prototype]]
为undefined
(Object
的[[Prototype]]
就是undefined
) 注:我认为此处应该是属性undefined 而不是“Object
的[[Prototype]]
就是undefined
”
如上图所示:
简单说就是通过对象的[[Prototype]]保存对另一个对象的引用,通过这个引用往上进行属性的查找,这就是原型链。
五、继承
有了原型链的概念,就可以进行继承。
这个时候产生了B的原型B.prototype
原型本身就是一个Object对象,我们可以看看里面放着哪些数据
B.prototype 实际上就是 {constructor : B , [[Prototype]] : Object.prototype}
因为prototype本身是一个Object对象的实例,所以其原型链指向的是Object的原型
但是我们只想把B的原型链指向A,如何实现?
第一种是通过改变原型链引用地址
ECMA中并没有__proto__这个方法,这个是ff、chrome等js解释器添加的,等同于EMCA的[[Prototype]],这不是标准方法,那么如何运用标准方法呢?
我们知道new操作的时候,实际上只是把实例对象的原型链指向了构造函数的prototype地址块,那么我们可以这样操作
这样产生的结果是:
产生一个A的实例,同时赋值给B的原型,也即B.prototype 相当于对象 {width :10 , data : [1,2,3] , key : "this is A" , [[Prototype]] : A.prototype}
这样就把A的原型通过B.prototype.[[Prototype]]
这个对象属性保存起来,构成了原型的链接
但是注意,这样B产生的对象的构造函数发生了改变,因为在B中没有constructor属性,只能从原型链找到A.prototype
,读出constructor:A
所以我们还要人为设回B本身
图示如下,其中红色部分代表原型链:
注:个人觉得B的prototype引用的object的[[Prototype]]指向这里有问题
几个输出深入理解原型
// console.log(Object.constructor)
// console.log(Object.name)
// console.log(Object.prototype)
// console.log((new Object()).__proto__)
// console.log(A.prototype.__proto__ == Object.prototype)
// console.log(A.prototype.__proto__ == (new Object()).__proto__)
// console.log(Object.prototype == (new Object()).__proto__)
// console.log((new Object()).constructor)
// console.log(Object.constructor)
// console.log((new A()).constructor)
// console.log(A.constructor)
// console.log(A.prototype.constructor)
// console.log(A.proto
- 关于js原型继承
- 关于js原型继承的理解
- JS:原型、原型链、继承
- js 原型继承
- js原型、继承
- JS原型继承实例
- js原型、继承
- js原型、继承
- js原型、继承
- js原型、继承
- js的原型继承
- JS 原型继承
- 再谈js原型继承
- js原型、继承
- 【JS】原型链继承
- js原型继承
- js原型、继承
- js原型、继承
- hdu 4956 Yet another end of the world ( 取模转化)
- 开启nginx状态监控
- WebView进行post请求
- HDU 1789 Doing Homework again 贪心
- 组合逻辑和时序逻辑
- 关于js原型继承
- 静态方法与非静态方法的区别
- maven 私服搭建(nexus)
- 怎么实现图片的圆角展示还有阴影展示
- HDU 4864 Task 贪心 难题
- RecyclerView 联系人排序
- MySQL学习笔记(五):关于max_allowed_packet错误的问题
- 日常使用 Git 的 19 个建议
- iOS检验是否为手机号码、身份证号码等