js继承

1、原型链

/*
*？？问题
*（1）父类中的**引用类型值会被子类共享**
*（2）不能向超类的构造函数中传递参数
*/
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;
}
//重写超类中的方法
SubType.prototype.getSuperValue=function(){
    return false;
}
var instance=new SubType();
console.log(instance.getSuperValue());

function A(a){
  this.varA = a;
}

// 以上函数 A 的定义中，既然 A.prototype.varA 总是会被 this.varA 遮蔽，
// 那么将 varA 加入到原型（prototype）中的目的是什么？
A.prototype = {
  varA : null,  // 既然它没有任何作用，干嘛不将 varA 从原型（prototype）去掉？
      // 也许作为一种在隐藏类中优化分配空间的考虑？
      // https://developers.google.com/speed/articles/optimizing-javascript#Initializing instance variables
      // 将会验证如果 varA 在每个实例不被特别初始化会是什么情况。
  doSomething : function(){
    // ...
  }
}

function B(a, b){
  A.call(this, a);
  this.varB = b;
}
B.prototype = Object.create(A.prototype, {
  varB : {
    value: null, 
    enumerable: true, 
    configurable: true, 
    writable: true 
  },
  doSomething : { 
    value: function(){ // override
      A.prototype.doSomething.apply(this, arguments); // call super
      // ...
    },
    enumerable: true,
    configurable: true, 
    writable: true
  }
});
B.prototype.constructor = B;

var b = new B();
b.doSomething();

2、借用构造函数

/*
*优势：可以通过构造函数向子类中传递参数
*？？问题
*（1）函数的复用无从谈起
*（2）在超类中定义的原型方法在子类中是不可见的
*/
function SuperType(name){
    this.name=name;
}

function SubType(){
    SuperType.call(this,"Nick");//!!!先调用，防止覆盖子类中的属性
    this.age=29;
}

var instance=new SubType();
console.log(instance.age);
console.log(instance.name);

3、组合继承

/*
* ******最常用方式******
*缺点：调用两次构造函数
*/
function SuperType(name){
    this.name=name;
    this.colors=["red","blue","black"];
}
SuperType.prototype.sayName=function(){
    console.log(this.name);
}

function SubType(name,age){
    //继承属性，必须先写，方式被覆盖
    SuperType.call(this,name);//第二次调用
    this.age=age;
}
//继承SuperType,！！！！先写
SubType.prototype=new SuperType();//第一次调用
SubType.prototype.constructor=SubType;
SubType.prototype.sayAge=function(){
    console.log(this.age);
}

var instance1=new SubType("Nick",24);
instance1.colors.push("heh");
console.log(instance1.colors);
instance1.sayAge();
instance1.sayName();

var instance2=new SubType("xiaoming",33);
console.log(instance2.colors);
instance2.sayAge();
instance2.sayName();

4、原型继承

/*
*目的：基于已有对象创建新对象，同时还不必因此创建自定义类型
*优点：不用创建构造函数
*缺点：会共享相应的值
*
*/
function object(o){
    function F(){}
    F.prototype=o;
    return new F();
}

var Person={
    name:"Nick",
    friends:["gic","fd","fff"]

};
//var anotherPerson=object(Person);
//*****!!!!等价于 
var anotherPerson=Object.create(Person,{
    name:{
        writable:true,
        value:"Grey"
    }
});
anotherPerson.name="Grey";
anotherPerson.friends.push("Bob");

var yetanotherPerson=object(Person);
yetanotherPerson.name="Linda";//不会修改父类的值，会重新生成一个name属性
anotherPerson.name="ff";
console.log(yetanotherPerson.name);//Linda
console.log(Person.friends);

5、寄生式继承

/*
*缺点：函数不能复用降低效率
*主要考虑对象而不是构造函数的情况下适用
*/
function object(o){
    function F(){}
    F.prototype=o;
    return new F();
}
function createAnother(original){
    var clone=object(original);
    clone.syaHi=function(){
        console.log("hi");
    };
    return clone;
}
var person={
    name:"Nick",
    friends:["gic","fd","fff"]

};
var anotherPerson=createAnother(person);
anotherPerson.syaHi();

3、寄生组合继承

/*
* 解决了组合继承两次调用构造函数问题
*/
function object(o){
    function F(){}
    F.prototype=o;
    return new F();
}
function inheritPrototype(subType,superType){
    var prototype=object(superType.prototype);//创建对象
    prototype.constructor=subType;//增强对象
    subType.prototype=prototype;//指定对象
}
function SuperType(name){
    this.name=name;
    this.colors=["red","blue","black"];
}
SuperType.prototype.sayName=function(){
    console.log(this.name);
}
inheritPrototype(SubType,SuperType);
function SubType(name,age){
    //继承属性，必须先写，方式被覆盖
    SuperType.call(this,name);//第二次调用
    this.age=age;
}

SubType.prototype.sayAge=function(){
    console.log(this.age);
}

var instance1=new SubType("Nick",24);
instance1.colors.push("heh");
console.log(instance1.colors);
instance1.sayAge();
instance1.sayName();

var instance2=new SubType("xiaoming",33);
console.log(instance2.colors);
instance2.sayAge();
instance2.sayName();

proto

1.所有构造器/函数的__proto__都指向Function.prototype，
 (1) 它是一个空函数（Empty function）
Number.__proto__ === Function.prototype  // true
Boolean.__proto__ === Function.prototype // true
String.__proto__ === Function.prototype  // true
Object.__proto__ === Function.prototype  // true
Function.__proto__ === Function.prototype // true
Array.__proto__ === Function.prototype   // true
RegExp.__proto__ === Function.prototype  // true
Error.__proto__ === Function.prototype   // true
Date.__proto__ === Function.prototype    // true

包括自定的
// 函数声明
function Person() {}
// 函数表达式
var Man = function() {}
console.log(Person.__proto__ === Function.prototype) // true
console.log(Man.__proto__ === Function.prototype)    // true
    js的解析器对函数声明与函数表达式并不是一视同仁地对待的。
    对于函数声明，js解析器会优先读取，确保在所有代码执行之前
    声明已经被解析，而函数表达式，如同定义其它基本类型的变量
    一样，只在执行到某一句时也会对其进行解析，所以在实际中，
    它们还是会有差异的，具体表现在，当使用函数声明的形式来定义函数时，
    可将调用语句写在函数声明之前，而后者，这样做的话会报错。
(2)Math，JSON是以对象形式存在的，无需new。它们的__proto__是
Object.prototype。
Math.__proto__ === Object.prototype  // true
JSON.__proto__ === Object.prototype  // true

（3）Function.prototype也是唯一一个typeof XXX.prototype为“function”
     的prototype。其它的构造器的prototype都是一个对象。如下
    console.log(typeof Function.prototype) // function
    console.log(typeof Object.prototype)   // object
    console.log(typeof Number.prototype)   // object
    console.log(typeof Boolean.prototype)  // object
    console.log(typeof String.prototype)   // object
    console.log(typeof Array.prototype)    // object
    console.log(typeof RegExp.prototype)   // object
    console.log(typeof Error.prototype)    // object
    console.log(typeof Date.prototype)     // object
    console.log(typeof Object.prototype)   // object

2.所有对象的__proto__都指向其构造器的prototype
p.__proto__ === Person.prototype===p.constructor.prototype
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,524评论 5赞 460
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,869评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,813评论 0赞 320
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,210评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,085评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,117评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,533评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,219评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,487评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,218评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,589评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2赞 335

推荐阅读更多精彩内容

  • js继承
    原文链接 js的继承有6种方式，大致总结一下它们各自的优缺点，以及它们之间的关系。 1.原型链 js的继承机制不同...
    空_城__阅读 788评论 0赞 11
  • 如何面对生活中的那些不幸？
    昨天晚上，按照惯例，翻着杂志消磨睡前时间，看到了一则故事，想要分享给各位听友。 故事讲的是一位风光了50年的话剧演...
    c7b6666e4189阅读 1,360评论 0赞 0
  • 中国大陆发明专利申请审查程序
    主要介绍中国人向中国专利局提交发明专利申请时，所需要提交和注意的事项 中国发明专利的审查程序流程图： 注：图片转自...
    盼着晴天的小懒虫阅读 731评论 0赞 0
  • 聊斋解放性的桎梏
    也不知是不是最近在看聊斋的缘故，昨晚做了春梦。也不能说是春梦吧，只是梦到和两个女人做爱，但是一点激动的心情都没有。...
    Hushering阅读 219评论 0赞 0
  • 9月17、18日 《FBI教你读心术》 躯干的秘密
    躯干作为身体中占面积最多的部位，它是众多器官的载体，它的很多行为都可以反映人们的秘密，很多行为都是为了保护自己。 ...
    陌霭阅读 455评论 0赞 0