原型与继承

1.js是通过原型链来实现继承

基本思想是利用原型的一个引用类型继承另一个引用类型的属性和方法。原型对象将包含一个指向另一个原型的指针,而另一个原型的指针又指向它的构造函数。子类的prototype指向父类的实例。

所有对象的根类都是空的Object

var A = function(){};
A.prototype = { name: 'sven'};

var B = function(){};
B.prototype = new A();

var b = new B();
console.log(b.name);

2.确定原型和实例的关系

1).instanceof
2).isPrototypeOf()

3.继承方法

如果直接使用原型链继承,那么instance的构造函数是指向SuperType
缺点:
1).引用类型值的原型属性会被所有实例共享,所以其中一个实例修改了,其他所有实例也会跟着变化
2).实例初始化无法传递参数,因为原型指向的是父类的构造函数,所以传参也没用

1).经典继承

通过apply,call继承父类原型,在子类原型中添加自己的属性

function SuperType(name){
    this.name = name;
}

function SubType(){
    //继承SuperType
    SuperType.call(this,"Tom");
    //自定义子类属性
    this.age = '29;
}

var instance = new SuvType();
alert(instance.age); //29
2).组合式继承

子类通过借用构造函数(applay,call)继承父类的实例属性的继承,通过原型链对原型属性和方法的继承
缺点:调用2次父类的构造函数

function SuperType(name){
    this.name = name;
}
SuperType.proptotype.sayName = function(){ alert(this.name) }

function SubType(){
    //继承SuperType的构造函数属性和方法
    //第二次调用SuperType
    SuperType.call(this,"Tom");
    this.age = '29;
}

//继承SuperType的原型链的属性和方法
//第一次调用SuperType()
subType.prototype = new SubperType();
subType.constructor = subType;
3).原型式继承

基于上一个实例封装,目得就是为了实例共享

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

anotherPerson.name = "Greg"; 
anotherPerson.friends.push(" Rob");

//ES6新方法
var yetAnotherPerson = Object.create(person,
    {
        name: {value: "Linda"},
    }
);
console.log( anotherPerson.friends);//"Shelby, Court, Van, Rob, Barbie"
4).寄生式继承

原型式继承的改进。简单地给对象添加函数

var person = { name: "Nicholas", friends: ["Shelby", "Court", "Van"] };

function createAnother(original){ 
    var clone = Object(original); 
    //添加新方法,增强
    clone. sayHi = function(){alert(" hi"); }; 
    return clone;
}

var anotherPerson = createAnother(person); 
anotherPerson.sayHi(); //"hi"
5).寄生组合式继承

最终BOSS,解决伪继承的缺点,极组合式继承和寄生式继承优点

function inheritPrototype(subType, superType){ 
    //创建对象
    var prototype = Object(superType.prototype);  
    //增强对象 
    .....
    prototype.constructor = subType;
    //指定对象
    subType.prototype = prototype; 
}

function SuperType(name){
    this.name = name;
}
SuperType.proptotype.sayName = function(){ alert(this.name) }

function SubType(){
    SuperType.call(this,"Tom");
    this.age = '29;
}

//不直接new superType,而是浅复制它的原型
inheritPrototype(subType,superType)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容