Rumah >hujung hadapan web >tutorial js >js的继承方式有哪些?js实现继承的几种方式介绍
本篇文章给大家带来的内容是关于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
相关推荐:
Atas ialah kandungan terperinci js的继承方式有哪些?js实现继承的几种方式介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!