js面向对象

前段时间刷知乎看到一个面试题,要讲讲原型链、构造函数、对象之间的联系,特地拿出红宝书整理出思维导图,加深下印象。


面向对象.png

关于继承的三个方式的代码,由于篇幅较长,不便写在原型中,所以以下整理出来。
1、原型链继承

function Chinese(){
  this.hairColor = 'black';
}
Chinese.prototype.getHairColor = function(){
  return this.hairColor;
}
function Coder(){
  this.hairColor = 'white';
}
//继承了Chinese
Coder.prototype = new Chinese();
Coder.prototype.getHairColor = function(){
  return this.hairColor;
}
var coder1 = new Coder();
alert(coder.getHairColor());     //white

例子中实例、构造函数及原型的联系如图:

原型链.png

2、借用构造函数继承

function Chinese(){
  this.hairColor = ['black','blue','green'];
}
function Coder (){
  //继承了Chinese
  Chinese.call(this);
}
var coder1 = new Coder();
coder1.color.push("white");
alert(color1.color);  //"black, blue, green, white"
var coder2 = new Coder();
alert(coder2.color);  //"black, blue, green"

3、组合继承

function Person(name){
  this.name = name;
}
Person.prototype.sayName = function(){
  alert(this.name);
}
function Children(name, age){
  //继承属性
  Person.call(this, name);
  this.age = age;
}
//继承方法 
Children.protoType = new Person();
Children.protoType.sayAge = function(){
  alert(this.age);
}
var children1 = new Children("Nicholas", 9);
children1.sayName();       //"Nicholas"
children1.sayAge();           //9
var children2 = new SubType("Wendy", 10);
children2.sayName();      //"Wendy"
children2.sayAge();          //10

剧终。。。
『写得不好的地方请大胆吐槽,非常感谢大家带我进步。』

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好。 不...
    晨光2016阅读 1,395评论 8赞 13
  • title: js面向对象date: 2017年8月17日 18:58:05updated: 2017年8月27日...
    lu900618阅读 732评论 0赞 2
  • 现在我们有一个UIView,和一个button,当点击button的时候,我们希望能在这个view上以九宫格的形式...
    ForeverYoung21阅读 1,110评论 2赞 3
  • 你我的状态是,两个人静默无言,转身却和陌生人相谈甚欢。
    Lemon_O白画弥阅读 383评论 0赞 0
  • 百名干部入企联,共促经济稳发展。 十二小组驻龙源,深入基层细调研。 省组廿一积极参,乐生...
    远处的秋色阅读 177评论 0赞 0

友情链接更多精彩内容