JS中的继承(上)

学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,
可以了解一下我之前写的JS中的原型对象

相信很多同学也跟我一样,刚开始接触js的面向对象编程的时候,都抱着一种排斥的心态--为什么js这么麻烦?
其实了解完原型链后,再来看js的继承,你会发现js的继承其实比其他OOP语言更简单,更灵活,我们来看一个基于原型链的继承


// 父类
function Person() {} // 子类
function Student(){} // 继承
Student.prototype = new Person()

我们只要把子类的prototype设置为父类的实例,就完成了继承,怎么样? 是不是超级简单? 有没有比Java,C#的清晰?
事实上,以上就是js里面的原型链继承

当然,通过以上代码,我们的Student只是继承了一个空壳的Person,这样视乎是毫无意义的,我们使用继承的目的,
就是要通过继承获取父类的内容,那我们先给父类加上一点点简单的内容(新增的地方标记 '// 新增的代码'):


// 父类
function Person(name,age) {
this.name = name || 'unknow' // 新增的代码
this.age = age || 0 // 新增的代码
} // 子类
function Student(name){
this.name = name // 新增的代码
this.score = 80 // 新增的代码
} // 继承
Student.prototype = new Person()

使用


var stu = new Student('lucy') console.log(stu.name) // lucy --子类覆盖父类的属性
console.log(stu.age) // 0 --父类的属性
console.log(stu.score) // 80 --子类自己的属性

这里为了降低复杂度,我们只演示了普通属性的继承,没有演示方法的继承,事实上,方法的继承也很简单,
我们再来稍微修改一下代码,基于上面的代码,给父类和子类分别加一个方法(新增的地方标记 '// 新增的代码')


// 父类
function Person(name,age) {
this.name = name || 'unknow'
this.age = age || 0
} // 为父类新曾一个方法
Person.prototype.say = function() { // 新增的代码
console.log('I am a person')
} // 子类
function Student(name){
this.name = name
this.score = 80
} // 继承 注意,继承必须要写在子类方法定义的前面
Student.prototype = new Person() // 为子类新增一个方法(在继承之后,否则会被覆盖)
Student.prototype.study = function () { // 新增的代码
console.log('I am studing')
}

使用


var stu = new Student('lucy') console.log(stu.name) // lucy --子类覆盖父类的属性
console.log(stu.age) // 0 --父类的属性
console.log(stu.score) // 80 --子类自己的属性
stu.say() // I am a person --继承自父类的方法
stu.study() // I am studing --子类自己的方法

这样,看起来我们好像已经完成了一个完整的继承了,这个就是原型链继承,怎么样,是不是很好理解?
但是,原型链继承有一个缺点,就是属性如果是引用类型的话,会共享引用类型,请看以下代码


// 父类
function Person() {
this.hobbies = ['music','reading']
} // 子类
function Student(){} // 继承
Student.prototype = new Person()

使用


var stu1 = new Student()
var stu2 = new Student() stu1.hobbies.push('basketball') console.log(stu1.hobbies) // music,reading,basketball
console.log(stu2.hobbies) // music,reading,basketball

我们可以看到,当我们改变stu1的引用类型的属性时,stu2对应的属性,也会跟着更改,这就是原型链继承缺点 --引用属性会被所有实例共享,
那我们如何解决这个问题呢? 就是下面我们要提到的借用构造函数继承,我们来看一下使用构造函数继承的最简单例子:


// 父类
function Person() {
this.hobbies = ['music','reading']
} // 子类
function Student(){
Person.call(this) // 新增的代码
}

使用


var stu1 = new Student()
var stu2 = new Student() stu1.hobbies.push('basketball')
console.log(stu1.hobbies) // music,reading,basketball
console.log(stu2.hobbies) // music,reading

这样,我们就解决了引用类型被所有实例共享的问题了

注意,这里跟 原型链继承 有个比较明显的区别是并没有使用prototype继承,而是在子类里面执行父类的构造函数,
相当于把父类的代码复制到子类里面执行一遍,这样做的另一个好处就是可以给父类传参


// 父类
function Person(name) {
this.name = name // 新增的代码
} // 子类
function Student(name){
Person.call(this,name) // 改动的代码
}

使用


var stu1 = new Student('lucy')
var stu2 = new Student('lili')
console.log(stu1.name) // lucy
console.log(stu2.name) // lili

看起来已经很有Java,C#的味道了有没有?

但是,构造函数解决了引用类型被所有实例共享的问题,但正是因为解决了这个问题,导致一个很矛盾的问题出现了,--函数也是引用类型,
也没办法共享了.也就是说,每个实例里面的函数,虽然功能一样,但是却不是同一个函数,就相当于我们每实例化一个子类,就复制了一遍的函数代码


// 父类
function Person(name) {
this.say = function() {} // 改动的代码
} // 子类
function Student(name){
Person.call(this,name)
}

使用


var stu1 = new Student('lucy')
var stu2 = new Student('lili')
console.log(stu1.say === stu2.say) // false

以上代码可以证明,父类的函数,在子类的实例下是不共享的

总结

继承方式 继承核心代码 优缺点
原型链继承 Student.prototype = new Person() 实例的引用类型共享
构造函数继承 在子类(Student)里执行 Person.call(this) 实例的引用类型不共享

从上表我们可以看出 原型链继承构造函数继承 这两种继承方式的优缺点刚好是互相矛盾的,那么我们有没有办法鱼和熊掌兼得呢?
没有的话,我就不会说出来了,^_^,接下来请允许我隆重介绍 组合继承

组合继承,就是各取上面2种继承的长处,普通属性 使用 构造函数继承,函数 使用 原型链继承,
这个代码稍微复杂一点,不过相信有了上面的基础后,看起来也是很轻松


// 父类
function Person() {
this.hobbies = ['music','reading']
} // 父类函数
Person.prototype.say = function() {console.log('I am a person')} // 子类
function Student(){
Person.call(this) // 构造函数继承(继承属性)
}
// 继承
Student.prototype = new Person() // 原型链继承(继承方法)

使用


// 实例化
var stu1 = new Student()
var stu2 = new Student() stu1.hobbies.push('basketball')
console.log(stu1.hobbies) // music,reading,basketball
console.log(stu2.hobbies) // music,reading console.log(stu1.say == stu2.say) // true

这样,我们就既能实现属性的独立,又能做到函数的共享,是不是很完美呢?

组合继承据说是JavaScript中最常用的继承方式(具体无法考证哈).

至此,我们就把js里面的常用继承了解完了,其实也没有那么难嘛!不过,我们总结一下3种继承

  1. 原型链继承,会共享引用属性
  2. 构造函数继承,会独享所有属性,包括引用属性(重点是函数)
  3. 组合继承,利用原型链继承要共享的属性,利用构造函数继承要独享的属性,实现相对完美的继承

上面为什么要说相对完美呢? 因为本文的标题叫【JS中的继承(上)】,那肯定是还有
【JS中的继承(下)】咯,
目前为止,我们只讲了3种最基本的继承,事实上,JavaScript还有好多继承方式,为了让你不至于学习疲劳,所以我打算分开来讲,
如果你没有那个耐性继续看下去,那么看完这篇对于理解JavaScript的继承,也是够用的。但是建议多看两遍,加深印象,
我学js继承的时候,那本犀牛书都被我翻烂了,写这篇文字的时候,我还在一遍翻一边写的呢(嘘!)

好了,今天就到这里,感谢收看,如果觉得对您有用,请给本文的github加个star,万分感谢,
另外,github上还有其他一些关于前端的教程和组件,有兴趣的童鞋可以看看,你们的支持就是我最大的动力。

原文地址:https://segmentfault.com/a/1190000014476341

JS中的继承(上)的更多相关文章

  1. JS中的继承(下)

    JS中的继承(下) 在上一篇 JS中的继承(上) 我们介绍了3种比较常用的js继承方法,如果你没看过,那么建议你先看一下,因为接下来要写的内容, 是建立在此基础上的.另外本文作为我个人的读书笔记,才疏 ...

  2. js中实现继承的几种方式

    首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...

  3. 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承

    ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...

  4. js中的继承和重载

      js中有三种继承方式:一.通过原型(prototype)实现继承 二.借用构造函数式继承,可分为通过call()方法实现继承和通过apply()方法实现继承 仅仅通过原型继承我们可以发现在实例化子 ...

  5. JS中对象继承方式

    JS对象继承方式 摘自<JavaScript的对象继承方式,有几种写法>,作者:peakedness 链接:https://my.oschina.net/u/3970421/blog/28 ...

  6. 详细理解JS中的继承

    正式说继承之前,有两个相关小点: JS只支持实现继承,即继承实际的方法,不支持接口继承(即继承方法的签名,但JS中函数没签名) 所有对象都继承了Object.prototype上的属性和方法. 说继承 ...

  7. 浅谈JS中的继承

    前言 JS 是没有继承的,不过可以曲线救国,利用构造函数.原型等方法实现继承的功能. var o=new Object(); 其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属 ...

  8. js中的继承

    js中继承的实现方式很多,此处给出两种常用方式. <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> ...

  9. JS中的继承方式总结

    1. 原型链继承(又称类继承) Child.prototype = new Parent(); function Parent (name, age) { this.name = name; this ...

随机推荐

  1. IntelliJ IDEA 2017.3 搭建一个多模块的springboot项目(二)

    上一篇我成功搭建了一个项目,名叫bale-project,下面我们继续搭建子模块. 在项目名称上右键,New->Module,新建一个模块. 这次我们选择Spring Initializr 起个 ...

  2. JS基础_数组的方法

    常用的方法 1.push:向数组的末尾添加一个或更多元素,并返回新的长度. 将要添加的元素作为方法的参数传递,这些元素将会自动添加到数组的末尾 var a=[1,2,3]; var r = a.pus ...

  3. HTTP之缓存技术

    1. 缓存简介 缓存是位于服务器和客户端的中间单元,主要根据用户代理发送过来的请求,向服务器请求相关内容后提供给用户,并保存内容副本,例如 HTML 页面.图片.文本文件或者流媒体文件.然后,当下一个 ...

  4. P1439 【模板】最长公共子序列 LCS

    P1439 [模板]最长公共子序列 题解 1.RE的暴力DP O(n2) 我们设dp[i][j]表示,S串的第i个前缀和T串的第j个前缀的最长公共子序列. ◦          分情况: ◦      ...

  5. LC 265. Paint House II

    There are a row of n houses, each house can be painted with one of the k colors. The cost of paintin ...

  6. React Native真机红屏报错总结

    一.run-android报错:unable to load script from assets 'index.android.bundl' 解决: 1.进入\android\app\src\mai ...

  7. Jsp +Js + Jquery + EasyUI + Servlet + Lucene,完成分页

    package loaderman.fy.action; import java.io.IOException; import java.io.PrintWriter; import java.uti ...

  8. python数据挖掘决策树算法

    决策树是一个非参数的监督式学习方法,主要用于分类和回归.算法的目标是通过推断数据特征,学习决策规则从而创建一个预测目标变量的模型.如下如所示,决策树通过一系列if-then-else 决策规则 近似估 ...

  9. openstack核心组件--glance镜像(2)

    一.glance介绍:              Glance是Openstack项目中负责镜像管理的模块,其功能包括虚拟机镜像的查找.注册和检索等. Glance提供Restful API可以查询虚 ...

  10. dede不同栏目调用不同banner图的方法

    用顶级栏目ID 方法: <img src="{dede:global.cfg_templets_skin/}/images/{dede:field.typeid function=&q ...