原型继承

一、原型判断方法
*术语解释:成员=属性+方法
实例成员:实例属性和实例方法
原型成员:原型对象属性和原型对象方法
1、原型对象:每个构造函数都有一个与之相关联的对象,这个对象称之为原型对象。 (相关联是指通过一个prototype属性来连接这个对象,然后原型对象可以通过 constructor回到构造函数)
2、特点:构造函数的原型对象上的所有属性和方法会被构造函数创建出来的所有对象共享。

3、 访问原型对象:(1) prototype
(2)proto
(3)object.getPrototypeof()
4、设置原型对象:(1)动态特性(利用prototype属性直接添加,)
(2)使用字面量替换(1、在替换前创建出的对象和替换后创建出的对象,他们所指向的原型对象不是同一个原型对象。2、修改constructor指向)
(3)系统的原型对象只可以添加属性和方法,不能替换或删除。

5、(1)hasownproperty: 检查对象中是否存在制定的属性(不包含原型成员)。
作用:过滤处理,过滤原型对象成员。
(2) in 检查对象中是否存在制定的属性(包含原型成员)。
(3)isPrototypeof()检查某个对象是否是指定对象的原型对象。(包含原型链)
(4)object.getpototypeof():获取某个对象的原型对象。
(5)instanceof :判断某个构造函数的原型对象是否在当前的原型链上面。

6、call方法和apply方法:借用其他对象的方法,并且绑定方法的内部this。方法是在函数Fuction原型对象上的。所有的函数对象都可以调用。

<script>
 var obj={
     name:'jane',
     show: function (a,b) {
         console.log(this.name + ":" + a + b);
     }
 };
var obj1={name:'jack '  };
      obj.show(1,2);
     obj.show.call(obj1,2,2); //方法在调用时会立刻执行。后面的参数借用前者方法。
                                         //实参传递不是应该写在调用函数的后面。
</script>
    call和 aplly区别:传参方式不同,call可以接受多个参数,但apply方法只接受连两个参数,后面的实参需要写入到一个字符串中;
                                 形参的默认长度不一样。(函数的length属性,获取的是函数形参的个数)

7.this关键字:指向一个对象,具体到某一个由当前上下文决定。在函数的内部,和函数的调用方法有关。
7.1函数调用方式: A、直接调用(指向window)
function demo1(){ console.log(this); }
demo1();//
B、对象的方法调用(指向调用该方法的object)
function demo1(){ console.log(this);}
var obj={}
obj.demo=demo1;
obj.demo();
C:构造函数的方式调用(指向新创建的对象)
function demo1(){ console.log(this);}
var obj= new demo1();
console.log(obj);
D:函数上下文调用(传递的第一个参数)
call和apply
7.2(重点)this的对视问题
var demo1={
name:'123',
show: function () {
console.log(this.name)}
};
var t=demo1.show;
t();
用函数t直接调用对象方法时,相当于在赋值之后,已经脱离了原对象,此时t内部的this变量已经独立出来,和源对象没有了关系,此时的this已经指向了Window,运行后,在window中查询自定义的方法,未查询到的情况下输出空字符。

8.tostring方法:转换为字符串,以字符串的方式来描述对象。 返回值是一个数组,有两个参数,他们分别表示 [对象类型,构造函数类型]
但数组类型的返回值是数组中的值,原因在于数组的tostring方法在数组的原型对象中单独存在,所以需要借用对象类型原型的方法来做为判断,
Object.prototype.toString.call()

  1. Array.isAarray判断某个对象是否是数组类型。
    注意点:这个方法是ES5的,存在兼容性问题。需要自定义一个函数来解决此问题。

二、继承
1、继承分类:(1)、基于接口的继承(2)基于实现的继承
2、javascript使用了一种独特继承机制——原型继承(不包含原型成员 )。prototype属性,是建立这种机制的关键,这个属性存在于每一个构造函数中。
3、实现方式:
(1)属性拷贝
1.1 属性拷贝分为:浅拷贝和深拷贝
存在问题:A、如果要拷贝多个对象需要多次for……in循环。B、如果属性是引用类型,存在共享问题;
解决问题A:使用object.assign来解决多次拷贝问题。
作用:拷贝对个对象的属性。
语法:object.assign(目标对象,源对象1,源对象2 …………)
注意点:---ES6退出的新方法,使用需要注意兼容性。
---存在同名属性会被按照参数顺序覆盖。
---有返回值,为目标对象。
---如果只传递一个参数,直接返回当前对象。如果不是对象,会转
换为对应的包装对象。
---如果是null或者undefined,会报错。
---目标对象正常,其他值会忽略处理其他值。字符串会特殊处理为
数组对象来处理,
---同样存在共享问题。
1.2 用深拷贝解决共享问题:
浅拷贝在对对象进行拷贝时,传递的是地址,所以存在数据共享的问题。
方案:遍历对象的过程中,值类型直接赋值,属性为引用类型,添加一个引用类型的属性,添加的时被添加的对象中并不存在一个引用类型的值,所以需要在内部初始化一个引用类型。属性的值为一个引用类型,然后遍历,再赋值。
具体代码实现:

function deepcopy(obj,obj1){
    obj=obj||{};
    for(var key  in obj1){
        if(typeof obj1[key]=='object'){
                        obj[key]={};
                 deepcopy(obj[key],obj1[key])
        }else{
                 obj[key]=obj1[key]
        }
    }
}

存在缺点:在循环遍历初始化中,无法对数组类型做出正确的判断,被解析成了object类型属性,所以需要进行改进。
在添加对象初始化中:用Array.isArray判断:
obj[key]=Array.isArray(obj1[key])?[]:{};

                    (2)原型式继承
                            第一种实现方式:
                               1.1 ---提供构造函数
                               1.2---设置构造函数原型的成员
                               1.3---直接在原型对象写入方法的缺点:
                            (a) 团队开发会出现相同属性名覆盖的问题,造成混乱,
                            (b)性能不好,和属性的访问方式相关,原型对象的属性增
                                    多,遍历的复杂度会上升。
                            1.4--- 如何克服缺点:安全扩展原型对象 
                                  提供自己的构造函数;设置构造函数的原型对象;在自己提
                            供的构造函数原型对象上添加成员;然后用自己的构造函数创建
                           对象。引出了第二种实现方式。

                           第二种实现方式:
                                1.1 ---提供构造函数
                                1.2---设置构造函数原型对象,然后替换掉构造函数原来的原
                             型。
                            对象,并且同时需要修正构造器的constructior属性,使它指向原
                            实例对象的构造函数。
                            
                         第三种实现方法:
                           1.1---提供父构造函数
                           1.2---设置父构造函数的原型对象
                           1.3---提供子构造函数
                           1.4---设置子构造函数的原型对象
                           1.5---创建对象(子函数原型对象替换为父函数原型对象)
                   缺点:a:无法获取父构造函数的实例成员;b:存在共享问题。
                            无法共享的可以通过原型链来解决(原型链继承),但依然存在
                  共享问题。

                    (3)原型链继承
                         ** 原型链结构:
                         1.1 所有的对象都是由构造函数创建出来,每个对象都有相对应的
                  构造函数,
                         1.2每个构造函数都有一个与之相关联的原型对象。 
                         1.3构造函数原型对象本身也是对象,因此,构造函数原型对象也
                   有自己的构造函数。 
                         1.4构造函数原型对象的构造函数也有相关联的原型对象。而这个
                  原型对象也是对象。
                     以上是一种链式的访问结构,JS对原型链的终点进行了特殊处理,
                object.prototype._prto_=null。
                          ** 原型链搜索规则:对象在访问属性时,首先在自身查找,然后
                 去自己的原型对象,然后去原型对象的原型对象。一直重复到找到。
                 属性和方法在位没有找到的情况下,会出现属性未定义,方法报错的情
                 况。
                     1.5 注意点:a:代码的书写顺序,完成原型链继承之后,再修改
               constructor属性指向构造函数,然后添加原型成员;b:无法向父函数传递
               参数。父构造函数的实例对象的实例成员会自动成为子构造函数的实例
               成员的原型成员。
                    1.6 object.create()该方法用来创建一个对象,并且设置创建的对象的
             原型对象为他括号内参数指定的某一对象。
                            注意点:ES5推出的,有兼容性问题,(自定义一个新方法)
           实现步骤为:先自定义一个空函数后,并设置其原型对象,然后返回。
<script>
   function Animal(){
    this.color='红色的老王';
   };
Animal.eat= function () {
    console.log('eat');
}
   function Person(){
       this.name='人中老王';
   }
   Person.prototype= new Animal();
   Person.prototype.constructor=Person;
   Person.prototype.say= function () {
       console.log('hello');
   }
   function Student(){
  this.number='123456789'
   }
   Student.prototype=new Person();
   Student.prototype.constructor=Student;
   Student.prototype.study= function () {
       console.log('study');
   }
    function  Boy(){
        this.GF='凤姐';
    }
   Boy.prototype=new Student();
   Boy.prototype.constructor=Boy;
   Boy.prototype.play= function () {
       console.log('王者荣耀');
   }
var b=new Boy()
   console.log(b);
</script>

      存在问题:无法向父构造函数传递参数。
                        共享问题。
                 

                   (4)借用构造函数(经典继承)

函数的创建:a.直接声明,
b.函数表达式(匿名式,命名式【使用命名式创建函数后,关键字后function后的名称只提供给内部调用】)
c.使用构造函数创建 var fuc = new function(形参1,形参2,函数体)

<script>
 function Person(name,age){
        //this值得是Person的实例对象
        this.name = name;
        this.age = age;
    }
    new Person();
    Person.prototype.showName = function(){
        console.log(this.name);
    }
    function Man(GF,name,age)
    {
        this.GF = GF;
        //调用Person函数,并且绑定Person函数内部的this为第一个参数,也就是Man的实例对象,也就是this
        //获得父构造函数中的实例对象的实例成员并且传递参数
        Person.call(this,name,age);
    }
    Man.prototype = new Person();
    var m1 = new Man("范冰冰","小米",12);
    var m2 = new Man("李冰冰","小麦",21);
    //要求:m1要能够拥有父构造函数(Person)的实例对象上面的实例成员 和原型成员
    console.log(m1);
    console.log(m2);
<script>
                   (5)组合继承1(原型式+借用构造函数)
<script>
    function Person(name,age){
        this.name = name;
        this.age = age;
    }
    Person.prototype.showName = function(){
        console.log(this.name);
    }

    function Man(GF,name,age)
    {
        this.GF = GF;
        Person.call(this,name,age);
    }
    Man.prototype = Person.prototype;
    var m1 = new Man("范冰冰","小米",12);
    console.log(m1);
    m1.showName();
</script>

依然会存在共享的问题,需要使用深拷贝解决。
(6)组合继承2(深拷贝+借用构造函数)

    function deepcopy(obj,obj1){
        obj=obj||{};
        for(var key  in obj1){
            if(typeof obj1[key]=='object'){
                obj[key]={};
                deepcopy(obj[key],obj1[key])
            }else{
                obj[key]=obj1[key]
            }
        }
    }
    function Person(name,age){
        this.name = name;
        this.age = age;
    }
    Person.prototype.eat = function(){
        console.log(this.name);
    }

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

推荐阅读更多精彩内容