聊一聊js中的继承
一、简单继承---使用原型赋值的方式继承,将实例化的对象,赋值给子级的原型
父级构造函数
function Parent(param) {
this.name = 'parent'
this.otherName = 'otherName'
this.param = param || 'param'
}
Parent.prototype.sayName = function() {
console.log('this.name :', this.name)
}
子级构造函数
function Son() {
this.name = 'son'
}
Son.prototype = new Parent() // 继承
let newSon1 = new Son()
let newSon2 = new Son() console.log('newSon1 :', newSon1) // newSon1 : Parent { name: 'son' }
// newSon1 : Parent { name: 'parent', otherName: 'otherName' } // newSon1.__proto__ 指向构造函数 Son 的原型 prototype
console.log('newSon1 :', newSon1.__proto__)
// newSon1.__proto__ 指向构造函数 Son 的原型 prototype
// Son 的 prototype 赋值为 new Parent(),所以 Son 的构造函数不是自己,而是 Parent
// newSon1.__proto__.constructor : function Parent() {
// this.name = 'parent'
// this.otherName = 'otherName'
// }
console.log('newSon1.__proto__.constructor :', newSon1.__proto__.constructor) console.log('newSon2 :', newSon2) // newSon1 : Parent { name: 'son' }
// newSon2 : Parent { name: 'parent', otherName: 'otherName' } // newSon2.__proto__ 指向构造函数 Son 的原型 prototype
console.log('newSon2 :', newSon2.__proto__) // 修改 newSon1 继承而来的 otherName 属性, newSon2也发生了变化
newSon1.__proto__.otherName = 'son1-OtherName'
console.log('newSon1.otherName :', newSon1.otherName)
console.log('newSon2.otherName :', newSon2.otherName)

缺点:

所有的实例化对象会共享属性,对于任一个属性的修改,其他的实例化对象都会同步变化
子级的构造函数也不是自己,需要重新指定
二、经典继承---改变this指向到当前的实例化对象
父级构造函数
function Parent() {
this.name = 'parent'
this.otherName = 'otherName'
}
Parent.prototype.sayName = function() {
console.log('this.name :', this.name)
}
子级构造函数
function Son(param) {
Parent.call(this, param) // 继承
}
缺点:
解决了上面提到的属性共享问题
新问题出来了,需要将方法定义在构造函数内部,否则无法被继承,
每实例化一次,构造函数里面的函数方法就创建一次,对资源是一个浪费
三、组合继承
使用call/apply方法进行属性的继承
用原型链继承的方法,继承原来的所有函数方法
父级构造函数
function Parent() {
this.name = 'parent'
this.otherName = 'otherName'
}
Parent.prototype.sayName = function() {
console.log('this.name :', this.name)
}
子级构造函数
function Son(param) {
Parent.call(this, param)
}
Son.prototype = Parent.prototype
Son.prototype.constructor = Son // 修改构造函数为自己
缺点:
因为是使用赋值引用的模式进行原型继承,
如果子级重写父级的某个属性或方法,父级也会发生改变
四、组合继承+深拷贝
父级构造函数
function Parent() {
this.name = 'parent'
this.otherName = 'otherName'
}
Parent.prototype.sayName = function() {
console.log('this.name :', this.name)
}
子级构造函数
function Son(param) {
Parent.call(this, param)
}
深拷贝原型链
deepCopy(Son.prototype, Parent.prototype)
Son.prototype.constructor
= Son // 修改构造函数为自己
function deepCopy(target, obj) {
for (const prop in obj) {
if (obj.hasOwnProperty(prop)) {
if (typeof obj[prop] === 'object') {
target[prop] = Object.prototype.toString.call(obj[prop]) === '[object Array]' ? [] : {}
deepCopy(target[prop], obj[prop])
} else {
target[prop] = obj[prop]
}
}
}
}

谈谈JavaScript中继承方式的更多相关文章

  1. javascript中继承方式及优缺点(一)

    分别介绍原型链继承.call/apply继承(借用构造函数继承).组合继承.原型式继承.寄生式继承.寄生组合式继承 1. 原型链继承 核心:将父类的实例作为子类的原型 function SuperTy ...

  2. javascript中继承方式及优缺点(三)

    文以<JavaScript高级程序设计>上的内容为骨架,补充了ES6 Class的相关内容,从我认为更容易理解的角度将继承这件事叙述出来,希望大家能有所收获. 1. 继承分类 先来个整体印 ...

  3. javascript中继承方式及优缺点(二)

    一.原型链继承 方式1: 原型链继承 (1)流程: ​ 1.定义父类型构造函数. ​ 2.给父类型的原型添加方法. ​ 3.定义子类型的构造函数. ​ 4.创建父类型的对象赋值给子类型的原型. ​ 5 ...

  4. 谈谈javascript中的prototype与继承

    谈谈javascript中的prototype与继承 今天想谈谈javascript中的prototype. 通常来说,javascript中的对象就是一个指向prototype的指针和一个自身的属性 ...

  5. Javascript中继承

    Javascript中继承 构造函数继承 原型继承 call和apply继承 组合继承

  6. javascript 中继承实现方式归纳

    转载自:http://sentsin.com/web/1109.html 不同于基于类的编程语言,如 C++ 和 Java,javascript 中的继承方式是基于原型的.同时由于 javascrip ...

  7. 实现JavaScript中继承的三种方式

    在JavaScript中,继承可以通过三种手法实现原型链继承 使用apply.call方法 对象实例间的继承.     一.原型链继承 在原型链继承方面,JavaScript与java.c#等语言类似 ...

  8. 谈谈javascript中原型继承

    什么是继承?拿来主义:自己没有,别人有,把别人的拿过来使用或者让其成为自己的 如何实现继承的方式 原型继承 混入继承 经典继承 1. 混入继承 由于一个对象可以继承自任意的对象,即:o可以继承自对象o ...

  9. javascript中继承(一)-----原型链继承的个人理解

    [寒暄]好久没有更新博客了,说来话长,因为我下定决心要从一个后台程序员转为Front End,其间走过了一段漫长而艰辛的时光,今天跟大家分享下自己对javascript中原型链继承的理解. 总的说来, ...

随机推荐

  1. 第七课 路径与列表 html5学习2

    1.路径 一.相对路径1.同级路径2.下级路径 /3.上级路径 ../上一级路径 ../../上两级二.绝对路径 2.列表 列表特点;整齐.整洁.有序 一.无序列表语法格式<ul> < ...

  2. Android为TV端助力:adb查找包名位置

    logcat | grep START 查找启动launcher adb shell "pm list packages -f | grep +包名" 查找包的路径

  3. JMeter接口测试实战-动态数据验证

    JMeter接口测试实战-动态数据验证 说到验证就不得不说断言, 先来看下JMeter官方给出断言(Assertion)的定义, 用于检查测试中得到的响应数据等是否符合预期,用以保证测试过程中的数据交 ...

  4. 2019-1-17 前言 C#高级编程(第11版)

    C#已更新为更快的速度.主要版本7.0是2017年3月发布,次要版本7.1和7.2很快发布在2017年8月和2017年12月.通过项目设置,您可以与每个应用程序一起分发,是开源的,不可用仅适用于Win ...

  5. SQLServer之数据库行锁

    行锁使用注意事项 1.ROWLOCK行级锁确保在用户取得被更新的行,到该行进行更新,这段时间内不被其它用户所修改.因而行级锁即可保证数据的一致性,又能提高数据操作的并发性. 2.ROWLOCK告诉SQ ...

  6. Linux学习历程——Centos 7 diff命令

    一.命令介绍 diff命令用于比较文本差异. diff以逐行的方式,比较文本文件的异同处.如果指定要比较目录,则diff会比较目录中相同文件名的文件,但不会比较其中子目录. ------------- ...

  7. python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用

    在抓取网络数据的时候,有时会用正则对结构化的数据进行提取,比如 href="https://www.1234.com"等.python的re模块的findall()函数会返回一个所 ...

  8. DVWA-XSS学习笔记

    DVWA-XSS XSS概念:由于web应用程序对用户的输入过滤不严,通过html注入篡改网页,插入恶意脚本,从而在用户浏览网页时,控制用户浏览器的一种攻击. XSS类型: 反射型XSS:只是简单地把 ...

  9. mysql表与表之间数据的转移

    1.相同表结构 INSERT INTO table1 SELECT * FROM table2; 2.不同表结构 INSERT INTO table1(filed1,...,filedn) SELEC ...

  10. RuntimeException和Exception区别

    1.java将所有的错误封装为一个对象,其根本父类为Throwable, Throwable有两个子类:Error和Exception. 2.Error是Throwable 的子类,用于指示合理的应用 ...