登录  /  注册
首页 > web前端 > js教程 > 正文

js的继承方式有哪些?js实现继承的几种方式介绍

不言
发布: 2018-08-11 16:40:08
原创
5867人浏览过

本篇文章给大家带来的内容是关于js的继承方式有哪些?js实现继承的几种方式介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

1、js实现继承的方式:原型链

实现方法:A原型的实例是B原型的属性

不要忘记原型链中默认存在Object

子类添加方法或重写超类方法要放在替换原型语句之后

通过原型链实现继承后,不能使用对象字面量的方式创建方法和属性,因为会重写原型链

通过原型链实现继承后,超类的引用类型属性会被所有实例共享

function SuperType() {
  this.property = true;
  this.arr=[1,2,3]
}
SuperType.prototype.getSuperValue = function() {
  return this.property;
}
function SubType() {
  this.sub = false;
}
SubType.prototype = new SuperType();
//继承SuperType,即以superType的实例为中介,使subType。prototype指向superType的原型
SubType.prototype.getSubValue = function() { //添加新方法
  return this.sub;
}
SubType.prototype.getSuperValue = function() { // 重写超类中的方法
  return this.sub;
}
var instance1 = new SubType();
instance1.arr.push(4);
console.log(instance1.arr); //1,2,3,4
var instance2 = new SubType();
console.log(instance2.arr); //1,2,3,4
登录后复制

2、js实现继承的方式:借用构造函数

实现方法:在子类的构造函数内调用超类构造函数,即使用call()或者apply(),使得超类构造函数作用域发生改变

可以给构造函数传递参数,但无法进行函数复用

function SuperType(name,age){
  this.name = name;
  this.age = age;
}
function SubType() {
  SuperType.call(this,'i','21')//继承SuperType,并传递参数
  this.job = 'actor'
}
登录后复制

3、js实现继承的方式:组合继承

实现方法:使用原型链实现对原型属性和方法的继承,借用构造函数实现对实例属性的继承

隐患:调用两次父类构造函数(1call()方法,2new SuperType() )

function SuperType(name,age){
  this.name = name;
  this.age = age;
  this.f = [1,2,3,4]
}
SuperType.prototype.sayName = function() {
  console.log(this.name)
}
function SubType(name,age) {
  SuperType.call(this,name,age)//继承SuperType,并传递参数
  this.job = 'actor'
}
SubType.prototype=new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayHello=function() {
  console.log('hello')
}

var h = new SubType('hua', 18);
h.sayName()//haha
h.f.push(5)
console.log(h.f)//1,2,3,4,5
var n = new SubType();
console.log(n.f)//1,2,3,4
登录后复制

4、js实现继承的方式:原型式继承

以一个对象为基础,生成新对象,再对新对象进行修改

超类引用类型的属性依然是共享的

var person = {
  name:'lily',
  age:'21',
  friends:[1,2,3]
}
var people = Object.create(person);
people.friends.push(4);
var human = Object.create(person);
console.log(human.friends)//1,2,3,4
登录后复制

5、js实现继承的方式:寄生式继承

创建一个仅用来实现继承过程的函数,并在函数内部扩展对象,再将对象返回

此时父类的引用类型属性依然是被所有实例共享

function anotherFunction(original) {
  var clone  = Object(original);
  clone.sayHi = function() {
    console.log('hi')
  }
  return clone;
}
var person = {
  name:'lili',
  age:'21',
  f: [1,2,3]
}
var people1 = anotherFunction(person);
people1.f.push(4)
console.log(people1.f);// 1,2,3,4
var people2 = anotherFunction(person);
console.log(people2.f);// 1,2,3,4
登录后复制

6、js实现继承的方式:寄生组合式继承

通过借用构造函数来继承属性,通过原型链混成来继承方法

减少了一次父类构造函数的执行,父类引用类型的属性不被共享

function SuperType(name,age){
  this.name = name;
  this.age = age;
  this.f = [1,2,3,4]
}
SuperType.prototype.sayName = function() {
  console.log(this.name)
}
function SubType(name,age) {
  SuperType.call(this,name,age)
  this.job = 'actor'
}
function inherit(superType,subType) {
  var property =  Object.create(superType.property);// 创建父类原型的一个副本,并没有调用父类构造函数
  property.constructor = subType;// 使父类原型副本的constructor属性指向子类
  subType.property = property;// 子类的原型指向父类原型副本
}
inherit(SuperType,SubType)
var instance = new SubType('haha', 18);
instance.sayName()//haha
instance.f.push(5);
console.log(instance.f);//1,2,3,4,5
var ins = new SubType();
console.log(ins.f);//1,2,3,4
登录后复制

 相关推荐:

JS继承--原型链继承和类式继承_基础知识

JS中的继承方式实例详解

JS实现继承的几种方式

以上就是js的继承方式有哪些?js实现继承的几种方式介绍的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号