美文网首页
JavaScript继承

JavaScript继承

作者: helloyoucan | 来源:发表于2018-06-19 09:03 被阅读0次

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     
  SuperType.call(this); 
} 

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("Nicholas", 29); 
instance1.colors.push("black"); 
alert(instance1.colors);      //"red,blue,green,black" 
instance1.sayName();          //"Nicholas"; 
instance1.sayAge();           //29 
 
var instance2 = new SubType("Greg", 27); 
alert(instance2.colors);      //"red,blue,green" 
instance2.sayName();          //"Greg"; 
instance2.sayAge();           //27 
 

4.原型式继承

var person = {     
  name: "Nicholas",     
  friends: ["Shelby", "Court", "Van"] 
}; 
 
var anotherPerson = Object.create(person); 
anotherPerson.name = "Greg"; 
anotherPerson.friends.push("Rob");  

var yetAnotherPerson = Object.create(person); 
yetAnotherPerson.name = "Linda"; 
yetAnotherPerson.friends.push("Barbie"); 
 
alert(person.friends); //"Shelby,Court,Van,Rob,Barbie" 

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"

6.寄生组合式继承

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);         //第二次调用 SuperType()          
  this.age = age; 
} 
 
SubType.prototype = new SuperType();    //第一次调用 SuperType()
SubType.prototype.constructor = SubType; 
SubType.prototype.sayAge = function(){     
  alert(this.age); 
}; 

未续待完...

相关文章

  • 前端面试题目(二)

    javascript对象的几种创建方式 javascript继承的6种方法 详情:[JavaScript继承方式详...

  • 函数的原型对象

    什么是原型? 原型是Javascript中的继承的继承,JavaScript的继承就是基于原型的继承。 函数的原型...

  • 005|JavaScript ES6新特性之Classes

    在过去,需要像 053|JavaScript 继承详解 那样实现继承。JavaScript这种继承实现方式与其它面...

  • Web前端经典面试试题及答案2

    javascript面向对象中继承实现? 面向对象的基本特征有:封闭、继承、多态。在JavaScript中实现继承...

  • 一文带你彻底理解 JavaScript 原型对象

    一、什么是原型 原型是Javascript中的继承的基础,JavaScript的继承就是基于原型的继承。 1.1 ...

  • javascript代码积累

    一、javascript实现继承 1.基于原型链实现继承 2.基于属性和方法复制实现继承 二、javascript...

  • 理解 JavaScript 中的原型链

    JavaScript 作为一门面对对象语言,但是却不支持接口继承,只支持实现继承。JavaScript 中实现继承...

  • Javascript原型和原型链

    JavaScript在ES6之前没有类似class,extend的继承机制,JavaScript的继承主要是通过原...

  • JavaScript--对象创建和继承方法

    JavaScript创建对象方法总结精彩博文javascript继承讲解精彩博文于江水 继承讲解 JavaScri...

  • JavaScript 继承

    继承是JS中非常内容,原因就是JS没有地道的继承方式,我们只能通过各种方式来模拟面向对象中的继承。下面介绍几种常见...

网友评论

      本文标题:JavaScript继承

      本文链接:https://www.haomeiwen.com/subject/udooeftx.html