javascript实现继承的6种方式

/*1、原型链继承*/
function SuperType() {
    this.property = true;
}
SuperType.prototype.getSuperValue = function() {
    return this.property;
};
function subType() {
    this.subProperty = false;
}
//继承了SuperType
Subtype.prototype = new SuperType();
SubType.prototype.getSubValue = function() {
    return this.subProperty;
};

var instance = new subType();
alert(instance.getSuperValue());   //true
/*
 问题:包含引用类型值的原型属性会被所有实例属性共享。
       原型链实现继承时,原型实际上是另一个类型的实例,
       所以原先的实例属性变成了现在的原型属性。
*/
/*2、借用构造函数*/
function SuperType() {
    this.colors = {"red", "blue", "green"};
}
function SubType() {
    SuperType.call(this);   //调用SuperType构造函数对SubType对象初始化,每个SubType实例都有SuperType所有属性和方法
}

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors);   //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors);   //"red,blue,green"
/*
 问题:方法都在构造函数中定义,无复用性;超类型在原型中定义的方法对子类型不可见
*/
/*3、组合继承(原型链+借用构造函数)*/
function SuperType(name) {
    this.name = name;
    this.colors = {"red","blue","green"};
}
SuperType.prototype.sayName = function() {
    alert(this.name);
};
function SubType(name,age) {
    SuperType.call(this,name);   //借用构造函数
    this.age = age;
}
Subtype.prototype = new SuperType();   //原型链继承
Subtype.prototype.constructor = Subtype;
Subtype.prototype.sayAge = function() {
    alert(this.age);
}

var instance1 = new SubType("zcj",21);
instance1.colors.push("black");   //"red,blue,green,black"
instance1.sayName();   //"zcj"
instance1.sayAge();   //21

var instance2 = new SubType("Garg",27);
alert(instance2.colors);   //"red,blue,green"
instance1.sayName();   //"Garg"
instance1.sayAge();   //27
/*
 说明:避免了原型链和借用构造函数的缺陷,融合了其优点,最常用的继承模式
*/
/*4、原型式继承*/
var person = {
    name:"Nicholas",
    friends:["Shelby","Court","Van"]
};

var anotherPerson = Object.creat("person");
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = Object.creat("person");
anotherPerson.name = "Linda";
anotherPerson.friends.push("Barbie");

alert(person.friends);   //"Shelby,Court,Van,Rob,Barbie"
/*
 说明:利用Object.create()方法,将一个对象赋给新对象的原型并返回新对象,包含引用类型值的属性会共享相应的值(如原型模式一样)
*/
/*5、寄生式继承*/
function createAnother(original) {
    var clone = object(original);   //调用函数创建新对象
    clone.sayHi = function() {      //增强该对象
    alert("hi");
    };
    return clone;   //返回新建对象
}
var person = {
    name:"Nicholas",
    friends:["Shelby","Court","Van"]
};

var anotherPerson = createAnother(person);
anotherPerson.sayHi();   //"hi"
/*思路与工厂模式和寄生构造函数类似,能够返回新对象的函数(如object())接收一个对象作为参数.使用此方法由于不能做到函数的复用性而是效率降低(与构造函数模式类似)
*/
/*6、寄生组合式继承*/
function inheritPrototype(subtype,supertype) {
    var prototype = supertype.prototype;   //创建对象
    prototype.constructor = subtype;   //增强对象
    subtype.prototype = prototype;   //指定对象
}
function SuperType(name) {
    this.name = name;
    this.colors = ["red","blue","green"]
}

SuperType.prototype.sayName = function() {
    alert(this.name);
};
function SubType(name,age) {
    SuperType.call(this,name);   /*借用构造函数*/
    this.age = age;
}
inheritPrototype(SubType,SuperType);   /*继承原型函数,得到超类型副本*/
SubType.prototype.sayAge = function() {
    alert(this.age);
}
var instance = new SubType("zcj", 21);   /*只在这里调用了SuperType构造函数,在新对象上创建name和colors属性*/

/*
 说明:相对于组合式继承效率更高。只调用了一次SuperType构造函数,避免了在subType.prototype上创建不必要的属性
*/
时间: 2024-10-12 21:24:36

javascript实现继承的6种方式的相关文章

实现JavaScript中继承的三种方式

一.原型链继承  在原型链继承方面,JavaScript与java.c#等语言类似,仅允许单父类继承.prototype继承的基本方式如下: 代码如下: function Parent(){} function Child(){} Child.prototype = new Parent(); 通过对象Child的prototype属性指向父对象Parent的实例,使Child对象实例能通过原型链访问到父对象构造所定义的属性.方法等.  构造通过原型链链接了父级对象,是否就意味着完成了对象的继承

javascript实现继承的几种方式

原型链方式实现继承 [javascript] view plain copy print? function SuperType(){ this.property = true; this.colors = ['red','blue','green']; } SuperType.prototype.getSuperValue = function(){ return this.property; }; function SubType(){ this.subprototype = false;

JavaScript实现继承的几种方式总结一

虽然在ES6中有了继承,使用extends关键字就能实现.本篇讲的不是这种,而是ES6之前的几种实现继承的方式. (一)原型链 ECMAScript中将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.(不理解原型链的童鞋们可以翻阅一下我之前的博客,里面有详细的说明) 实现原型链的一种基本模式 function SuperType(){ this.prototype=true; } SuperType.prototype.getSuperValue=

JavaScript 实现继承的5种方式

js是一个面向对象的语言,所以具备一些面向对象的方式----------例如继承.接下来介绍5种js的继承方式.注意:js 中的函数其实是对象,函数名是对 Function 对象的引用. 1.采用call方法改变函数上下文实现继承,原理是改变函数内部的函数上下文this,使它指向传入函数的具体对象 具体代码如下 Father.call(child,child.getName) 的意思就是使用 Father对象代替child对象,child中就有 Father的所有属性和方法了,child对象就能

javascript实现继承的三种方式

一.原型链继承  function Parent(){} function Child(){} Child.prototype = new Parent(); 通过对象child的prototype属性指向父对象parent的实例,使child对象的实例通过原型链访问到父对象构造所定义的属性.方法等. 二.使用apply.call方法 js中call和apply都可以实现继承,唯一的一点参数不同,func.call(func1,var1,var2,var3)对应的apply写法为:func.ap

javascript实现继承的一种方式

function extend(Child, Parent) { var F = function(){}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; Child.uber = Parent.prototype; } 使用的时候,方法如下 extend(Cat,Animal); var cat1 = new Cat("大毛","

javascript继承的两种方式

javascript继承的两种方式 1,原型链 1 <script type="text/javascript"> 2 function A() 3 { 4 this.name='a'; 5 } 6 function B() 7 { 8 9 } 10 11 12 B.prototype=new A(); 13 var obj=new B(); 14 15 alert(obj.name); 16 </script> 2,对象冒充 1 <script type

javascript中实现继承的几种方式

javascript中实现继承的几种方式 1.借用构造函数实现继承 function Parent1(){ this.name = "parent1" } function Child1(){ Parent1.call(this); this.type = "child1"; } 缺点:Child1无法继承Parent1的原型对象,并没有真正的实现继承(部分继承) 2.借用原型链实现继承 function Parent2(){ this.name = "p

javascript中构造函数的三种方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> // 创建函数的三种方式: // 1 函数声明 // 2 函数表达式 //