原型、原型链、继承(构造函数继承,非构造函数继承)

一、原型

在JS设计出来的时候,只是为了实现一样网页的简单交互,并没有想过把JS设计成为一门面向对象的语言。后来的发展,JAVA和C++等语言都有了自己的Class用于继承,所以JS也想要实现继承,所以就出现了原型prototype

二、原形链

function Person(){
}
 var p = new Person()

对应的原型链结构为


每个构造函数都有一个原型属性prototype
每个对象都有 __proto__ 属性,指向了创建该对象的构造函数的原型。其实这个属性指向了 [[prototype]],但是 [[prototype]] 是内部属性,我们并不能访问到,所以使用 _proto_来访问。

对象可以通过 __proto__来寻找不属于该对象的属性,__proto__ 将对象连接起来组成了原型链

默认的原型链就是:
当前对象-->构造函数.prototype-->Object.prototype-->null

注意: 原型和实例上都有一个constructor构造器指向构造函数
Function.prototype.constructor === new Function().constructor

三.构造函数继承

构造继承
原型继承
实例继承(闭包继承)
拷贝继承
组合继承
寄生组合继承

优缺点考虑方向: 实例化的次数,是否父类子类实例,是否可以复用

1.构造继承

使用父类的构造函数来增强子类实例,等于赋值父类的实例属性给子类

    function Animal(){
        this.species  = "动物";
    }
    function Cat(name){
        Animal.call(this)
        Animal.apply(this)
        //相当于 Animal()
        //this.species = '动物' this指向Cat内部
        console.log(this)//Cat
        this.name = name;
    }

    var cat = new Cat("大毛")

缺点:
1.实例并不是父类的实例,只是子类的实例
2.只能继承父类的实例属性和方法,不能继承原型属性和方法

2.原型继承

使用构造函数的prototype指向父对象的一个实例,需要注意把子构造函数的constructor构造器重新指向自己,因为使用prototype指向了父构造函数的prototype,会出现原型链紊乱

    Cat.prototype = new Animal();
    Cat.prototype.constructor = Cat;
   var cat1 = new Cat("大毛","黄色");
   alert(cat1.species); // 动物

原型继承升级版

 function Animal(){ }
 Animal.prototype.species = "动物";

   Cat.prototype = Animal.prototype;
   Cat.prototype.constructor = Cat;
   var cat1 = new Cat("大毛");
   alert(cat1.species); // 动物

缺点:
1.无法实现多继承
2.创建子类实例时,无法想父类构造函数传参

3.实例继承

为父类实例添加新特性,作为子类实例返回

function Cat(name){
  var instance = new Animal();
  instance.name = name || '';
  return instance;
}
var cat1 = new Cat('大毛')

缺点
1.实例是父类的实例,不是子类的实例
2.不支持多继承

4.拷贝继承

把父对象的所有属性和方法,拷贝进子对象

  function Animal(){}
 Animal.prototype.species = "动物";

 function Cat(name){
     this.name = name;
  }
  function extend(Child, Parent) { 
     var p = Parent.prototype;
    var c = Child.prototype;
    for (var i in p) {
      c[i] = p[i];
      }
  }

extebd(Cat, Animal)
var cat1 = new Cat('大毛')
alert(cat1.species)

缺点:
1.效率低,内存占用高(因为需要拷贝父类的属性)
2.无法拷贝对象和数组

5.组合继承
通过调用父类构造,继承父类的属性并保留可以传参,然后通过将父类实例作为子类原型,实现函数复用

function Animal(){ this.species = '动物'}
function Cat(name){
   Animal.apply(this)
  this.name = name
}
Cat.prototype = new Animal()
Cat.prototype.constructor = Cat
var cat1 = new Cat('大毛')

优点:
1.可以继承实例属性和方法也可以继承原型方法
2.即是子类的实例,也是父类的实例
3.可传参
4.函数可复用
缺点: 调用了两次父类构造函数,生成了两份实例

寄生组合继承
通过计生方式,去掉父类的实例属性,这样,在调用两次父类的构造函数的时候,就不会初始化两次实例

function Cat(name){
  Animal.call(this)
  this.name = name 
}
(function(){
  //创建一个没有实例方法的类
  var Supe = function(){}
  Super.prototype = Animal.prototype
  //将实例作为子类的原形
  Cat.prototype = new Super()
  Cat.prototype.constructor = Cat
}())

var cat = new Cat('大毛')

优点
1.比起组合继承,减少了一次实例化父类,节省内存

四、非构造函数的继承

object()继承
浅拷贝
深拷贝

1.objecc()继承
实现object()函数,把子对象的prototype属性,指向父对象,使得父子对象连在一起

function object(o){
  function F(){}
  F.prototype = o
  return new F()
}
var guangzhou = object(Chinese)

2.浅拷贝
把父对象的属性,全部拷贝给子对象,也能实现继承

function copy(p){
  var c = {}
  for(var i in p){//[]则遍历牵引值 {}则遍历属性名
    c[i] = p[i]  
  }
  return c
}

3.深拷贝
深拷贝,能够实现真正意义上的数组和对象的拷贝,只需要递归地调用浅拷贝

function deepCopy(p,c){
  var c = c || {}
  for(var i in p){
    if(typeof i === 'object'){ //typeof arr && typeof object => object
    var c[i] = (p[i].constructor === Array) ? []: {}
    deepCopy(p[i], c[i])   
    }else{
      c[i] = p[i]
    }
  }
return c
}

JS继承的实现方式
深度解析原型中的各个难点

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

推荐阅读更多精彩内容