搜索
写经验 领红包
 > 美容

javascipt中的继承(js继承的几种方法)

在生活中,很多人可能想了解和弄清楚javascript 继承的几种写法总结的相关问题?那么关于javascript中的继承的答案我来给大家详细解答下。

javascript中的继承(js继承的几种方法)

js类的常用写法

1. prototype 继承父类

2. 修正 constructor

示例:

function Fn(name){

 this.name=name;

}

Fn.prototype.getName=function(){

 return this.name;

}

//继承

function SubFn(name){

 Fn.call(this,name); //传递参数

}

SubFn.prototype=new Fn();

SubFn.prototype.constructor=SubFn;

var test=new SubFn("全栈前端");

test.getName();

//"全栈前端"

注:缺点是构造函数会执行两次

js类的终极写法

1. 调用父类构造函数

2. 继承-复制父类的 prototype

//封装方法:返回父类的 prototype 的复制

function inheritObject(o){

function Fn(){};

Fn.prototype=o.prototype;

 return new Fn();

}

3. 修正 constructor

示例:

function Fn(name){

 this.name=name;

}

Fn.prototype.getName=function(){

 return this.name;

}

//继承

function SubFn(name){

 Fn.call(this,name);

}

SubFn.prototype=inheritObject(Fn);

SubFn.prototype.constructor=SubFn;

var test=new SubFn("全栈前端");

test.getName();

//"全栈前端"

多继承

同上,js的多继承靠复制多个父类的原型对象实现。

//单继承,多继承皆可

function inheritObject(){

 var

  len=arguments.length,

  extendPrototype={};

 for(var i=0;i<len;i++){

  var proto=arguments[i].prototype;

  for(var j in proto){

   extendPrototype[j]=proto[j];

  }

 }

 return extendPrototype;

}

注:同名属性方法会被覆盖

文章到这里结束,后续更多干货,关注后可以收到文章推送

【关注一下不迷路~】

温馨提示:通过以上关于javascript 继承的几种写法总结内容介绍后,相信大家有新的了解,更希望可以对你有所帮助。