JavaScript中继承的几种实现方式

php中世界最好的语言
Lepaskan: 2020-02-27 14:04:54
ke hadapan
2809 orang telah melayarinya

本篇文章将为你介绍JavaScript中继承的几种实现方式,希望在看完本篇文章后,各位对JavaScript的继承有一定的了解!

JavaScript中继承的几种实现方式

JavaScript中继承的几种实现方式

继承

想要实现继承,首先就得有个父类(构造函数)来提供属性和方法。

function Father(name){
    this.name=name   //父类构造函数中的属性
}
Father.prototype.age='40'   //父类原型中的属性
Salin selepas log masuk

1、借用构造函数继承

var Son=function(){
    Father.call(this,...arguments)
    this.age=10
}
var son=new Son('小明')
console.log(son)   //{name: "小明", age: 10}
Salin selepas log masuk

此时Son函数只是通过call方法在子级构造函数中调用父级构造函数

也就是说只继承了父类构造函数的属性,没有继承父类原型的属性。

此时可以通过instanceof方法进行判断

console.log(son instanceof Father) //false
Salin selepas log masuk

2、通过原型链继承

var Son=function(name){
    this.sonName=name
}
Son.prototype=new Father()
var xiaoming=new Son('小明')
console.log(xiaoming)    //{sonName:'小明'}
console.log(xiaoming.__proto__==Son.prototype)   //true
console.log(xiaoming.__proto__.__proto__==Father.prototype) //true
console.log(xiaoming.age)  //40  通过原型链查找
Salin selepas log masuk

Son继承了Father构造函数中的name属性以及原型中的age属性,

Son的原型对象小明继承了Son构造函数中的sonName属性、Father构造函数中的name属性以及原型中的age属性,但是只能传值给Son,不能传值给Father。

3、组合继承(组合原型链继承和借用构造函数继承)

var Son=function(){
    Father.call(this,...arguments)
}
Son.prototype=new Father()
var son=new Son('小明')
console.log(son)  //{name:'小明'}
console.log(son.age) //40
Salin selepas log masuk

结合1、2两种继承方法,解决了无法继承原型属性、方法以及不能传参的问题。实际上子类上会拥有父类的两份属性,只是子类的属性覆盖了父类的属性(Father.call(),new Father())

4、拷贝继承

通过for…in,把父类对象和原型对象上可枚举的属性和方法循环赋值到Son的原型上

function Son(name){
  var father=new Father()
  for(let i in father){
    console.log(father[i])
    Son.prototype[i]=father[i]
  }
  Son.prototype.name=name
}
var son=new Son('leo')
console.log(son)
Salin selepas log masuk

这种方法无法获取父类不可枚举的方法,同时因为要拷贝父类的属性和方法,内存占用比较高,效率较低。

5、原型式继承

采用原型式继承并不需要定义一个类,传入参数obj,生成一个继承obj对象的对象。类似于复制一个对象,用函数进行包装。但是它不是类式继承,而是原型式基础,缺少了类的概念。

function ObjectCreate(obj){ //这个方法的原理就是Object.create()
  function F(){}
  F.prototype=obj
  return new F()
}
var Son=new Father('son');
var son=ObjectCreate(Son)
var objson=Object.create(Son);
console.log(son.name)   //son
console.log(objson.name)  //son
console.log(son.__proto__==Son)  //true
Salin selepas log masuk

6、寄生式继承

创建一个仅仅用于封装继承过程的函数,然后在内部以某种方式增强对象,最后返回对象

function ObjectCreate(obj){
  function F(){}
  F.prototype=obj
  return new F()
}
var Son=new Father();
function subObject(obj){
  var sub=ObjectCreate(obj)
  sub.name='son'
  return sub
}
var son=subObject(Son)
console.log(son.name)  //son
Salin selepas log masuk

7、寄生组合式继承

结合寄生式继承和组合式继承,完美实现不带两份超类属性的继承方式,但是太过繁杂,感觉还不如组合式继承。

function ObjectCreate(obj){
  function F(){}
  F.prototype=obj
  return new F()  
}
var middle=ObjectCreate(Father.prototype) //middle的原型继承了父类函数的原型
function Son(){
  Father.call(this,...arguments)
}
Son.prototype=middle; 
middle.construtor=Son;   //修复实例 
var son=new Son('son');
console.log(son)   //{name:'son'}
Salin selepas log masuk

本文来自 js教程 栏目,欢迎学习!

Atas ialah kandungan terperinci JavaScript中继承的几种实现方式. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:cnblogs.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!