JavaScript原型与继承(1)
内容:
- 创建对象的几种模式以及创建的过程
- 原型链prototype的理解,以及
prototype
与__proto__
([[Prototype]]
)的关系 - 继承的几种实现
1.常见模式与原型链的理解
a.构造函数创建
function Test() {
//
}
流程
- 创建函数的时候会默认为Test创建一个prototype属性,
Test.prototype
包含一个指针指向的是Object.prototype
- prototype默认会有一个constructor,且
Test.prototype.constructor = Test
- prototype里的其它方法都是从Object继承而来

// 调用构造函数创建实例
var instance = new Test()
此处的instance包含了一个指针指向构造函数的原型,(此处的指针在chrome里叫__proto__
,也等于[[Prototype]]
)

b.原型模式
由上我们可以知道,默认创建的prototype属性只拥有constructor和继承至Object的属性,原型模式就是为prototype添加属性和方法
Test.prototype.getName = ()=> {
alert('name')
}
此时的instance实例就拥有了getName方法,因为实例的指针是指向Test.prototype的
instance.__proto__ === Test.prototype
如下图所示

这里我们可得知:实例instance与构造函数之间是通过原型prototype
来相关联的。
c.组合模式
这种模式我们用的最多,其实也是原型模式的另一种写法,只不过有一点小区别而已
function Test() {}
Test.prototype = {
getName() {
alert('name')
}
}
我们经常会这么直接重写prototype方法,由上我们可知,prototype会默认自带constructor属性指向构造函数本身,那么重写以后呢?
Test.prototype.constructor === Object
// 而并不等于Test了
// 因为重写以后相当于利用字面量方式创建一个实例对象,这个实例的构造函数是指向Object本身的
当然我们也可以手动赋值constructor
Test.prototype = {
constructor: Test,
getName() {
alert('name')
}
}
那么又会有疑问了constructor
要不要有何意义?我觉得constructor意义仅仅是为了来鉴别原型所属的构造函数吧。
当需要获取某个属性的时候,会先从实例中查找,没有就根据指针所指向的原型去查找,依次向上,直到实例的指针__proto__
指向为null时停止查找,例如:
// 1 读取name
instance.name
// 2 instance.__proto__ === Test.prototype
Test.prototype.name
// 3 Test.prototype.__proto__ === Object.prototype
Object.prototype.name
// 4
Object.prototype.__proto__ === null
当找到了这个属性就会直接返回,而不会继续查找,即使这个属性值为null,想要继续查找,我们可以通过delete
操作符来实现。
由这里我们自然可以想到Array, Date, Function, String
,都是一个构造函数,他们的原型的指针都是指向Object.prototype
,它们就像我这里定义的Test
一样,只不过是原生自带而已
d.几个有用的方法
Object.getPrototypeOf()
获取某个实例的指针所指向的原型Object.getPrototypeOf(instance) === Test.prototype
hasOwnProperty
判断一个属性是存在于实例中还是存在于原型中,如图所示:NY~N}CNR`}8W%4QA$M8LFE4.pngin
操作符,无论该属性是否可枚举'name' in instance // true
'getName' in instance // true无论属性是在实例中,还是在原型中都返回true,所以当我们需要判断一个属性存在与实例中,还是原型中有2种办法
// 一种就是使用hasOwnProperty判断在实例中
// 另一种判断在原型中
instance.hasOwnProperty('getName') === false && 'getName' in instance === truefor ... in
操作符也是一样的,但只会列出可枚举的属性,ie8版本的bug是无论该属性是否可枚举,都会列出D(%S__GN8404{H9X6PW$DVK.pngname是在实例中定义的,getName是在原型中定义的
Object.keys()
则不一样,它返回一个对象上所有可枚举的属性,仅仅是该实例中的Object.keys(instance)
// ["name"]
e.总结
以上讨论了构造函数,原型和实例的关系:
- 每个构造函数都有原型对象
- 每个原型对象都有一个
constructor
指针指向构造函数 - 每个实例都有一个
__proto__
指针指向原型
2.继承
继承的实质是利用构造函数的原型 = 某个构造函数的实例,以此来形成原型链。例如
// 定义父类
function Parent() {}
Parent.prototype.getName = ()=> {
console.log('parent')
}
// 实例化父类
let parent = new Parent()
// 定义子类
function Child() {}
Child.prototype = parent
// 实例化子类
let child = new Child()
child.getName() // parent
// 此时
child.constructor === parent.constructor === Parent
a.最经典的继承模式
function Parent(name) {
this.name = name
this.colors = ['red']
}
Parent.prototype.getName = function() {
console.log(this.name)
}
// 实例化父类
let parent = new Parent()
function Child(age, name) {
Parent.call(this, name)
this.age = age
}
Child.prototype = parent
// 实例化子类
let child = new Child(1, 'aaa')
child.getName() // parent
这里会让我想到ES6中的class继承
class Parent {
constructor(name) {
this.name = name
this.colors = ['red']
}
getName() {
console.log(this.name)
}
}
class Child extends Parent {
constructor(age, name) {
super(name)
}
}
let child = new Child(1, 'aaa')
child.getName() // parent
其实是一个道理,这里我们不难想到,将Child.prototype
指向parent实例,就是利用原型实现的继承,而为了每个实例都拥有各自的colors和name
,也就是基础属性,在Child的构造函数中call
调用了Parent的构造函数,相当于每次实例化的时候都初始化一遍colors和name
,而不是所有实例共享原型链中的colors和name
学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流群
343599877,我们一起学前端!
JavaScript原型与继承(1)的更多相关文章
- 深入理解:JavaScript原型与继承
深入理解:JavaScript原型与继承 看过不少书籍,不少文章,对于原型与继承的说明基本上让人不明觉厉,特别是对于习惯了面向对象编程的人来说更难理解,这里我就给大家说说我的理解. 首先JavaScr ...
- JavaScript原型与继承
JavaScript原型与继承 原型 在JavaScript中,每个函数都有一个prototype属性,这个属性是一个指针,指向该函数的原型对象.这个原型对象为所有该实例所共享.在默认情况下,原型对象 ...
- JavaScript原型与继承的秘密
在GitHub上看到的关于JavaScript原型与继承的讲解,感觉很有用,为方便以后阅读,copy到自己的随笔中. 原文地址:https://github.com/dreamapplehappy/b ...
- JavaScript 原型与继承
JavaScript 原型与继承 JavaScript 中函数原型是实现继承的基础.prototype.construct.原型链以及基于原型链的继承是面向对象的重要内容 prototype 原型即 ...
- javascript原型链继承
一.关于javascript原型的基本概念: prototype属性:每个函数都一个prototype属性,这个属性指向函数的原型对象.原型对象主要用于共享实例中所包含的的属性和方法. constru ...
- JavaScript 原型与继承机制详解
引言 初识 JavaScript 对象的时候,我以为 JS 是没有继承这种说法的,虽说 JS 是一门面向对象语言,可是面向对象的一些特性在 JS 中并不存在(比如多态,不过严格来说也没有继承).这就困 ...
- 8条规则图解JavaScript原型链继承原理
原形链是JS难点之一,而且很多书都喜欢用一大堆的文字解释给你听什么什么是原型链,就算有图配上讲解,有的图也是点到为止,很难让人不产生疑惑. 我们先来看一段程序,友情提示sublimeText看更爽: ...
- 【Javascript】Javascript原型与继承
一切都是对象! 以下的四种(undefined, number, string, boolean)属于简单的值类型,不是对象.剩下的几种情况——函数.数组.对象.null.new Number(10) ...
- 【前端知识体系-JS相关】深入理解JavaScript原型(继承)和原型链
1. Javascript继承 1.1 原型链继承 function Parent() { this.name = 'zhangsan'; this.children = ['A', 'B', 'C' ...
- JavaScript原型及继承
一.浅谈原型 首先我们要知道创建对象的方法有两种: 1.通过字面量的方式直接创建 var obj = { name:'baimao', age:21 } 2.通过构造函数创建对象 function P ...
随机推荐
- [luoguT30208]太极剑
题面在这里 description 在一个圆环上给出\(n\)条端点在圆环上的绳子, 每次在圆环上切割的轨迹是一条直线,可以将可以将所有与这条直线相交的绳子切断. 求切割次数的最小值. data ra ...
- POJ2079:Triangle——题解
http://poj.org/problem?id=2079 题目大意:求最大面积的三角形. —————————————————— 可以知道,最大面积的三角形的顶点一定是最大凸包的顶点. 接下来就是O ...
- BZOJ3747:[POI2015]Kinoman——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=3747 https://www.luogu.org/problemnew/show/P3582 共有 ...
- BZOJ2337:[HNOI2011]XOR和路径——题解
+++++++++++++++++++++++++++++++++++++++++++ +本文作者:luyouqi233. + +欢迎访问我的博客:http://www.cnblogs.com/luy ...
- [Leetcode] Sum root to leaf numbers求根到叶节点的数字之和
Given a binary tree containing digits from0-9only, each root-to-leaf path could represent a number. ...
- UVA.297 Quadtrees (四分树 DFS)
UVA.297 Quadtrees (四分树 DFS) 题意分析 将一个正方形像素分成4个小的正方形,接着根据字符序列来判断是否继续分成小的正方形表示像素块.字符表示规则是: p表示这个像素块继续分解 ...
- [CEOI2017]Mousetrap
P4654 [CEOI2017]Mousetrap 博弈论既视感 身临其境感受耗子和管理的心理历程. 以陷阱为根考虑.就要把耗子赶到根部. 首先一定有解. 作为耗子,为了拖延时间,必然会找到一个子树往 ...
- mysql 集群+主从同步
SQL节点: 给上层应用层提供sql访问. 管理节点(MGM): 管理整个集群. 启动,关闭集群. 通过ndb_mgmd命令启动集群 存储/数据节点: 保存cluster中的数据. 数据节点,可以 ...
- 《时间序列分析及应用:R语言》读书笔记--第二章 基本概念
本章介绍时间序列中的基本概念.特别地,介绍随机过程.均值.方差.协方差函数.平稳过程和自相关函数等概念. 2.1时间序列与随机过程 关于随机过程的定义,本科上过相关课程,用的是<应用随机过程&g ...
- HDU2896:病毒侵袭(AC自动机)
病毒侵袭 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...