JavaScript原型与继承的秘密
在github上看到的关于javascript原型与继承的讲解,感觉很有用,为方便以后阅读,copy到自己的随笔中。
原文地址:https://github.com/dreamapplehappy/blog/blob/master/2018/12/30/readme.md
首先我们需要知道的是,javascript是一种动态语言,本质上说它是没有class
(类)的;但是它也需要一种继承的方式, 那就是原型继承;javascript对象的一些属性和方法都是继承自别的对象。
很多同学对javascript的原型和继承不是很理解,一个重要的原因就是大家没有理解__proto__
和prototype
这两个属性的意思。 接下来我们先来好好梳理一下这两个属性,看看它们存在哪里,代表了什么意义,又有什么作用。
首先来说一下__proto__
这个属性吧,我们需要知道的是,除了null
和undefined
,javascript中的所有数据类型都有这个属性; 它表示的意义是:当我们访问一个对象的某个属性的时候,如果这个对象自身不存在这个属性, 那么就从这个对象的__proto__
(为了方便下面描述,这里暂且把这个属性称作p0
)属性上面 继续查找这个属性,如果p0
上面还存在__proto__
(p1)属性的话,那么就会继续在p1
上面查找响应的属性, 直到查找到这个属性,或者没有__proto__
属性为止。
我们可以用下面这两幅图来表示:
上面这幅图表示在obj
的原型链
上面找到了属性名字是a
的值
上面这幅图表示在obj
的原型链
上面没有找到属性名字是a
的值
我们把一个对象的__proto__
属性所指向的对象,叫做这个对象的原型
;我们可以修改一个对象的原型
来让这个对象拥有某种属性,或者某个方法。
// 修改一个number类型的值的原型 const num = 1; num.__proto__.name = "my name is 1"; console.log(num.name); // my name is 1 // 修改一个对象的原型 const obj = {}; obj.__proto__.name = "dreamapple"; console.log(obj.name); // dreamapple
这里需要特别注意的是,__proto__
这个属性虽然被大多数的浏览器支持,但是其实它仅在ecmascript 2015 规范
中被准确的定义, 目的是为了给这个传统的功能定制一个标准,以确保浏览器之间的兼容性。通过使用__proto__
属性来修改一个对象的原型是非常慢且影响性能的一种操作。 所以,现在如果我们想要获取一个对象的原型,推荐使用object.getprototypeof
或者reflect.getprototypeof
,设置一个对象的原型推荐使用object.setprototypeof
或者是reflect.setprototypeof
。
到这里为止,我们来对__proto__
属性做一个总结:
-
存在哪里? 除了
null
和undefined
所有其他的javascript对象或者原始类型都有这个属性 - 代表了什么? 表示了一个对象的原型
- 有什么作用? 可以获取和修改一个对象的原型
说完__proto__
属性,接下来我们就要好好的来理解一下prototype
属性了;首先我们需要记住的是,这个属性一般只存在于函数对象上面; 只要是能够作为构造器的函数,他们都包含这个属性。也就是说,只要这个函数能够通过使用new
操作符来生成一个新的对象, 那么这个函数肯定具有prototype
属性。因为我们自定义的函数都可以通过new
操作符生成一个对象,所以我们自定义的函数都有prototype
这个属性。
// 函数字面量 console.log((function(){}).prototype); // {constructor: ƒ} // date构造器 console.log(date.prototype); // {constructor: ƒ, tostring: ƒ, todatestring: ƒ, totimestring: ƒ, toisostring: ƒ, …} // math.abs 不是构造器,不能通过new操作符生成一个新的对象,所以不含有prototype属性 console.log(math.abs.prototype); // undefined
那这个prototype
属性有什么作用呢?这个prototype
属性的作用就是:函数通过使用new
操作符生成的一个对象, 这个对象的原型(也就是__proto__
)指向该函数的prototype
属性。 那么一个比较简洁的表示__proto__
和prototype
属性之间关系的等式也就出来了,如下所示:
// 其中f表示一个自定义的函数或者是含有prototype属性的内置函数 new f().__proto__ === f.prototype // true
看到上面等式,我想大家对于__proto__
和prototype
之间关系的理解应该会更深一层了。
好,接下来我们对prototype
属性也做一个总结:
-
存在哪里? 自定义的函数,或者能够通过
new
操作符生成一个对象的内置函数 -
代表了什么? 它表示了某个函数通过
new
操作符生成的对象的原型 -
有什么作用? 可以让一个函数通过
new
操作符生成的许多对象共享一些方法和属性
其实到这里为止,关于javascript的原型和继承已经讲得差不多了;下面的内容是一些基于上面的一些拓展, 可以让你更好地理解我们上面所说的。
当我们理解了上面的知识点之后,我们就可以对下面的表达式做一个判断了:
// 因为object是一个函数,函数的构造器都是function object.__proto__ === function.prototype // true // 通过函数字面量定义的函数的__proto__属性都指向function.prototype (function(){}).__proto__ === function.prototype // true // 通过对象字面量定义的对象的__proto__属性都是指向object.prototype ({}).__proto__ === object.prototype // true // object函数的原型的__proto__属性指向null object.prototype.__proto__ === null // true // 因为function本身也是一个函数,所以function函数的__proto__属性指向它自身的prototype function.__proto__ === function.prototype // true // 因为function的prototype是一个对象,所以function.prototype的__proto__属性指向object.prototype function.prototype.__proto__ === object.prototype // true
如果你能够把上面的表达式都梳理清楚的话,那么说明你对这部分知识掌握的还是不错的。
谈及javascript的原型和继承,那么我们还需要知道另一个概念;那就是constructor
,那什么是constructor
呢?constructor
表示一个对象的构造函数,除了null
和undefined
以外,javascript中的所有数据类型都有这个属性; 我们可以通过下面的代码来验证一下:
null.constructor // uncaught typeerror: cannot read property 'constructor' of null ... undefined.constructor // uncaught typeerror: cannot read property 'constructor' of undefined ... (true).constructor // ƒ boolean() { [native code] } (1).constructor // ƒ number() { [native code] } "hello".constructor // ƒ string() { [native code] }
我们还可以使用下面的图来更加具体的表现:
但是其实上面这张图的表示并不算准确,因为一个对象的constructor
属性确切地说并不是存在这个对象上面的; 而是存在这个对象的原型上面的(如果是多级继承需要手动修改原型的constructor
属性,见文章末尾的代码),我们可以使用下面的代码来解释一下:
const f = function() {}; // 当我们定义一个函数的时候,这个函数的prototype属性上面的constructor属性指向自己本身 f.prototype.constructor === f; // true
下面的图片形象的展示了上面的代码所表示的内容:
关于constructor
还有一些需要注意的问题,对与javascript的原始类型来说,它们的constructor
属性是只读的,不可以修改。 我们可以通过下面的代码来验证一下:
(1).constructor = "something"; console.log((1).constructor); // 输出 ƒ number() { [native code] }
当然,如果你真的想更改这些原始类型的constructor
属性的话,也不是不可以,你可以通过下面的方式来进行修改:
number.prototype.constructor = "number constructor"; (1).constructor = 1; console.log((1).constructor); // 输出 number constructor
当然上面的方式我们是不推荐你在真实的开发中去使用的,如果你想要了解更多关于constructor
的内容,可以看看object.prototype.constructor 。
接下来,我会使用一些代码来把今天讲解的知识再大致的回顾一下:
function animal(name) { this.name = name; } animal.prototype.setname = function(name) { this.name = name; }; animal.prototype.getname = function(name) { return this.name; }; function dog(name, breed) { animal.call(this, name); this.breed = breed; }
// 将dog的prototype的指向修改为animal.prototype
dog.prototype = object.create(animal.prototype); // 因为上面的语句将我们原来的prototype的指向修改了,所以我们要重新定义dog的prototype属性的constructor属性 reflect.defineproperty(dog.prototype, "constructor", { value: dog, enumerable: false, // 不可枚举 writable: true }); const animal = new animal("potato"); console.log(animal.__proto__ === animal.prototype); // true console.log(animal.constructor === animal); // true console.log(animal.name); // potato const dog = new dog("potato", "labrador"); console.log(dog.name); // potato console.log(dog.breed); // labrador console.log(dog.__proto__ === dog.prototype); // true console.log(dog.constructor === dog); // true
推荐阅读
-
Javascript日期对象的dateAdd与dateDiff方法
-
JavaScript中的垃圾回收与内存泄漏示例详解
-
Javascript中click与blur事件的顺序详析
-
JavaScript遍历数组的三种方法map、forEach与filter实例详解
-
浅谈href=#与href=javascript:void(0)的区别
-
深入理解JavaScript编程中的同步与异步机制
-
Javascript中类式继承和原型式继承的实现方法和区别之处
-
基于JavaScript实现类名的添加与移除
-
JavaScript使用prototype原型实现的封装继承多态示例
-
对python中类的继承与方法重写介绍