js中5中继承方式分析
Posted liululu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js中5中继承方式分析相关的知识，希望对你有一定的参考价值。
//1、借用式继承 把sup的构造函数里的属性方法克隆一份sub实例对象
function Super(){
this.val = 1;
this.fun1 = function(){console.log(‘fun1‘)};
}
Super.prototype.name = "name";
Super.prototype.fun2 = function(){console.log(‘fun2‘)};
function Sub(){
Super.call(this);
}
var sub1 = new Sub();
var sub2 = new Sub();
console.log(sub1.fun1 === sub2.fun1);
console.log(sub1.val);
console.log(sub1.name);
sub1.fun1();
//2、原型式继承 把Super的实例对象拿作Sub构造函数的原型属性
function Super(){
this.val1 = 1;
this.fun1 = function(){console.log(1)};
}
var pro = new Super();
function Sub(){}
Sub.prototype = pro;
var sub1 = Sub();
//3、寄生式 sub实例化对象新增了自己的属性方法，并且把Super的实例对象拿作Sub构造函数的原型属性
function Super(){
this.val1 = 1;
this.fun1 = function(){console.log(1)};
}
Super.prototype.val2 = 2;
Super.prototype.fun2 = function(){console.log(2)};
function Sub(){
}
Sub.prototype = new Super();
var sub1 = new Sub();
sub1.attr1 = 1;
sub1.attr2 = 2;
//4、组合式继承 把sup的构造函数里的属性方法克隆一份sub实例对象，并且把Super的实例对象拿作Sub构造函数的原型属性
function Super(){
this.val1 = 1;
this.fun1 = function(){console.log(1)};
}
Super.prototype.val2 = 2;
Super.prototype.fun2 = function(){console.log(2)};
function Sub(){
Super.call(this);
}
Sub.prototype = new Super();
var sub1 = new Sub();
var sub2 = new Sub();
console.log(sub1);
console.log(sub1.fun1 === sub2.fun1);
console.log(sub1.fun2 === sub2.fun2);
//5、寄生组合式 Sub构造函数的原型属性是第三个构造函数（它的原型为Sup的原型，但是没有Sup构造函数里的属性方法）的实例对象，把sup的构造函数里的属性方法克隆一份sub实例对象
function beget(obj){ // 生孩子函数 beget：龙beget龙，凤beget凤。
var F = function(){};
F.prototype = obj;
return new F();
}
function Super(){
// 只在此处声明基本属性和引用属性
this.val = 1;
this.arr = [1];
}
// 在此处声明函数
Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};
//Super.prototype.fun3...
function Sub(){
Super.call(this); // 核心
// ...
}
var proto = beget(Super.prototype); // 核心
proto.constructor = Sub; // 核心
Sub.prototype = proto; // 核心
var sub = new Sub();
alert(sub.val);
alert(sub.arr);
以上是关于js中5中继承方式分析的主要内容，如果未能解决你的问题，请参考以下文章