js中继承的几种方式

什么是继承？
- 继承是指一个类能够使用另一个类的属性和方法。被继承的那个类称为父类，继承父类属性和方法的那个类叫做子类，即子类能够使用父类里的属性和行为。

继承的几种方式

一、原型链继承

特点：属性是共享的，如果属性中有引用数据类型，那么修改其中一个，另外一个也会修改。
实现方式：在要继承的子类的原型上面赋值为父类的实例化 例子如下：

       //父函数function Parent(name,age) {this.name = name;this.age = age;this.hobby = ["音乐", "电影", "睡觉"]}//原型上面添加方法 runParent.prototype.run = function () {console.log(this.name + "今年" + this.age);return this.name + "今年" + this.age}//要继承的子函数function Child() {}// 原型链继承：在Child的原型上赋值为 Parent的实例化 实现继承// new Child()会生成一个实例化对象 此时这个对象有上面的name age hobby属性 还有原型上面的 run方法// 并将这个实例化对象 赋值给Child的原型 以实现继承//这时候再实例化 Child 就可以实现继承了Child.prototype = new Parent("小王",18);  //继承实现的核心代码let newChildA = new Child();let newChildB = new Child();console.log(newChildA,newChildA.name);console.log(newChildB,newChildA.name);console.log(newChildA.run());// 原型链继承的特点 如果属性有引用类型 继承的是引用的地址// 改变一个 另外一个也会改变// 例如:属性hobby为数组 改变newChildA的 打印newChildB的也改变了newChildA.hobby.push("篮球");console.log(newChildA,newChildA.hobby);console.log(newChildB,newChildB.hobby);//改变基本类型不受影响newChildA.name = "小周";newChildB.name = "小秋";console.log(newChildA);console.log(newChildB);

二、构造函数继承

特点：
- 1、可以解决原型链继承中共享属性的情况，不存在引用类型一个修改，另外一个也会发生变化的情况。
- 2、构造函数继承不会继承原型链上面的属性及方法

实现方式：使用this绑定的形式，来实现继承 例子如下：

        //父类function Parent(name, age) {this.name = name;this.age = age;this.hobby = ["音乐", "电影", "睡觉"]}//原型上面添加方法 runParent.prototype.run = function () {console.log(this.name + "今年" + this.age);return this.name + "今年" + this.age}//子类function Child(name,age) {Parent.call(this,name,age);  //构造函数的继承,使用this绑定的形式来获得父类含有的属性}let newChildA = new Child("小何",24);let newChildB = new Child("小何",24);console.log(newChildA);console.log(newChildB);//改变其中一个的引用类型newChildA.hobby.push("篮球");console.log(newChildA); // hobby: (4) ['音乐', '电影', '睡觉', '篮球']console.log(newChildB); // hobby: (4) ['音乐', '电影', '睡觉']//打印可以看到,相互是不会影响的，解决了原型链继承共享属性的情况newChildA.run()  //会报错，此时实例上面没有 run方法 构造函数继承不会继承原型链上面的方法

三、组合继承

特点：
- 1、相当于把构造函数继承与原型链继承组合在一起
- 2、及可以解决原型链继承共享属性的情况又可以实现继承父类原型链上的属性及方法
缺点：
- 会实例化两次，在改变子对象this指向的时候会实例化一次，在赋值父实例的时候也会实例化一次

实现方式：构造函数继承与原型链继承的方式都有 详见下面例子

        function Parent(name, age) {this.name = name;this.age = age;this.hobby = ["音乐", "电影", "睡觉"]}//原型上面添加方法 runParent.prototype.run = function () {console.log(this.name + "今年" + this.age);return this.name + "今年" + this.age}function Child(name, age) {Parent.call(this, name, age); //构造函数继承   会实例化一次}Child.prototype = new Parent() //原型链继承     会再一次实例化  // 以上两个地方会 实例化两次let newChildA = new Child("小何", 24);let newChildB = new Child("小何", 24);console.log(newChildA);console.log(newChildB);newChildA.run() //run方法调用成功

四、寄生组合继承

实现方式：调用Object.create方法，并传入父类的原型，再将返回值赋值给子类的原型

        function Parent(name, age) {this.name = name;this.age = age;this.hobby = ["音乐", "电影", "睡觉"]}//原型上面添加方法 runParent.prototype.run = function () {console.log(this.name + "今年" + this.age);return this.name + "今年" + this.age}function Child(name, age) {Parent.call(this, name, age); //构造函数继承}Child.prototype = Object.create(Parent.prototype) //与组合继承的差异//通过create方法创造了一个对象，并且这个对象的proto指向Parent的prototypelet newChildA = new Child("小何", 24);let newChildB = new Child("小何", 24);console.log(newChildA);console.log(newChildB);newChildA.run() //run方法调用成功

五、Es6方式实现继承

实现方式：子类通过 extends 关键字并在子类的constructor中调用 super() 实现继承

        class Parent {constructor() {this.age = 18;}}class Child extends Parent {constructor() {super();this.name = "张三"}}let o1 = new Child();console.log(o1, o1.name, o1.age);

js中继承的几种方式相关推荐

js中继承的几种用法总结(apply,call,prototype)
本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助一,js中对象继承 js中有三种继承方式 1.js原型(proto ...
Js中自定义对象四种方式
Js中自定义对象四种方式 1 类似JAVA有参构造方式: 1.定义对象: function 对象(属性[age]){追加属性:如(this.age = age)[this代表当前对象的地址值的引用]追 ...
(转)js实现继承的5种方式
js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式 1.使用对象冒充实现继承(该种实 ...
js中数组排序的五种方式
下面主要介绍了数组排序的五种方式--sort()方法.选择排序.冒泡排序.插入排序和快速排序, 刚兴趣的朋友,可以往下看哦. 1.js中的sort()方法基本思想:根据提供的排序规则,对数组元素进行 ...
JS中创建对象：三种方式（pink）
在 JavaScript 中,现阶段我们可以采用三种方式创建对象(object): (1)利用字面量创建对象 (2)利用new Object创建对象 (3)利用构造函数创建对象
JS 实现继承的 5 种方式
文章目录继承原型链继承原型链继承的优缺点构造继承构造继承的优缺点复制继承复制继承的优缺点组合继承组合继承的优缺点寄生组合继承参考继承继承作为面向对象语言的三大特性之一(继承. ...
JavaScript(js)实现继承的几种方式
1.原型链继承核心:将父类的实例做为子类的原型对象 //动物类function Animal(name,sex) {this.name = name || 'Animal';this.sex = s ...
面试--js实现继承的几种方式
基于原型的继承 function father() {this.faName = 'father';this.names=['11','22']}father.prototype.getfaName ...
JS 总结之原型继承的几种方式
在之前的总结中,我们详细分析了原型<JS 总结之原型>,原型很大作用用于模拟继承,这一次,我们来聊原型继承的几种方式. function Person (age) {this.age = ...
Django中Model继承的三种方式
Django中Model继承的三种方式 Django中Model的继承有三种: 1.抽象继承 2.多表继承 3.proxy model(代理model) 1.抽象继承第一种抽象继承,创建一个通用父类 ...

js中继承的几种方式

js中继承的几种方式

js中继承的几种方式相关推荐

最新文章

热门文章