javascript中实现继承的方式

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript中实现继承的方式，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2904字，纯文字阅读大概需要5分钟。

内容图文

js中的继承

??js中的继承和java中的继承不一样，js中的继承主要是通过对父类进行复制来实现的。今天刷题的时候想起来这个问题，之前看了一遍，还是没有记很清楚，所以我就查阅了资料外加网上搜索，总结了几条，那么到底该怎样实现呢，今天就来谈谈。
??首先，一个公共的父类，代码如下：

//公共父类
function People(name,age){
    this.name = name;
    this.age = age;
    this.friends=['lili','candy','tom'];
    //内部方法
    this.sayAge = function(){  
        console.log('i am '+this.age+' years old now');
    }
}
//原型方法
People.prototype.sayName = function(){
   console.log(this.name+' 现在 '+this.age+' 岁!');
}

1、原型继承
??这种方式是大家很容易就能想到的，几乎是脱口而出。主要实现方法是：将子类的原型作为父类的实例（Child1.prototype = new People()）

//子类
function Child1(){

} 
Child1.prototype = new People();  //核心
Child1.prototype.name = 'tyj';
Child1.prototype.age = 20;
var child1 = new Child1();

console.log(child1.name);       
console.log(child1.friends);     //['lili','candy','tom']  
child1.sayName();

原型继承的缺点：
??1）引用类型值的原型属性会被所有实例共享
??2）不能向父类传递参数

基于第一个缺点举个栗子：

var child2 = new Child1();
child2.friends.push('lucy');
console.log(child2.friends);    //['lili','candy','tom','lucy']
console.log(child1.friends)    //['lili','candy','tom','lucy']

基于第二个缺点举个栗子：

function Child1(name){
} 
var child2 = new Child1("一马平川");
var child22 = new Child1("顺顺利利");
child2 .sayName();        //undefined现在undefined岁!
child22 .sayName();      //undefined现在undefined岁!
//如果想设置参数，可以在Child1的原型上添加

2、构造函数继承
??使用构造函数实现继承，主要是借用了call()和apply()方法来实现

//子类
function Child2(name){
    People.call(this);    //调用父类，继承People
    this.name = name || 'Jack';
    this.age = age || 15;
}
var child2 = new Child2();
console.log(child2.name);
child2.sayAge();    //父类内部方法，可以调用
child2.sayName();  //父类原型上方法，调用时报错

构造函数继承的缺点：
??1）不能调用父类的原型方法，只能是内部方法
??2）每个子类都有父类实例函数的副本，影响性能

3、组合继承
??这种方式是将原型继承和构造函数继承的方式组合在一起，原型链实现对原型属性和方法的继承，构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有它自己的属性。这也是 JavaScript 最常用的继承模式

//子类
function Children(){
    People.call(this,'candy',20);
}
Children.prototype = new People();
var child3 = new Children();
console.log(child3 .name);
child3 .sayName();   //原型上定义的方法

4、寄生组合式继承

function Child4(name,age){
    People.call(this);
    this.name = name;
    this.age = age;
}
// 创建只继承原型对象的函数
function init(parent,child){     //参数：父类型构造函数和子类型构造函数。
    var prototypes = new Object(parent.prototype);   // 创建一个原型对象副本
    prototypes.constructor = child;    // 设置constructor属性，重写原型而失去的默认的 constructor 属性
    child.prototype = prototypes;
}
init(People,Child4);

var child4= new Child4('heihei',18);
console.log(child4.name);

内容总结

以上是互联网集市为您收集整理的javascript中实现继承的方式全部内容，希望文章能够帮你解决javascript中实现继承的方式所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端