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中继承方式分析

最新文章

热门文章