js-----继承 曾经终败给现在 2021-09-20 06:56 377阅读 0赞 1:创建的三种方式 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70][] 2:构造函数和实例对象之间的关系 实例对象和构造函数之间的关系 1:实例对象是通过构造函数来创建的 过程叫实例化 2:如何判断对象是不是这个数据类型 1)通过构造器的方式 实例对象.构造器 == 构造函数 2)instanceof 对象 instanceof 构造函数名称(推荐) 一个对象的构造器指向的不一定是自己的构造函数,有可能是object ![20190619172302976.png][] 3:原型的引入 作用:数据共享,节省内存空间 ![20190619173403220.png][] 下面调用eat的时候,指向的是同一块内存空间 实例对象中有这两个属性(这两个属性是通过构造函数来获取的) ,__proto__属性 构造函数没有这两个属性 实例对象中有个属性,__proto__,也是对象,叫原型,不是标准的属性,浏览器使用的(所以存在兼容问题) 构造函数中也有这个属性 prototype,也是对象,叫原型,,是标准属性,程序员用的 数据共享,节省内存空间,作用之一 4:构造函数和实例对象和原型对象之间的关系 通过构造函数实例对象,并初始化 \* 构造函数可以实例对象 \* 构造函数有个属性叫prototype,是构造函数的原型对象 \* 构造函数的原型对象(prototype)里面有一个构造器constrotor,这个构造器指向的就是自己所在的原型对象所在的构造函数 \* 实例对象的原型对象,指向的是该构造函数的原型 \* 构造函数中原型的方法,可以被实例对象直接访问 5:简单的原型写法 Student.prototype = \{ height:'188', eat:function()\{ \} \} 缺点:这样写会把构造器丢了,需要手动修改构造器的指向 6:原型中的方法可以相互调用 this.方法 7:原型链 实例对象到原型 ---原型连 * 实例对象使用的属性或方法,先在实例中找,找到直接使用,找不到,则在实例对象的__proto__指向的构造函数的原型对象prototype中找,找到使用,找不到,报错 <!--原型链:是一种关系,实例对象和原型对象之间的关系,关系是通过原型(__proto__)来联系的--> 8:改变原型的指向 构造函数中的this是实例对象 原型对象中方法中this就是实例对象 * 原型指向可以改变 * 实例对象的原型(__proto__)指向的是该对象所在的构造函数的原型对象 * 构造函数的原型对象(prototy)如果改变了,那么实例对象的原型也就改变了,this的指向也就改变了 * 实力对象和原型对象通过__proto__原型来联系起来,这个关系叫原型链 *在原型改变之后添加方法 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1][] 原型最终指向了哪里 实例对象的 \_\_proto\_\_ 指向构造函数的原型对象prototype ,构造函数的原型对象prototype.\_\_proto\_\_ 指向object.prototype object.prototype.\_\_proto\_\_指向null 其实他们之间都是实例对象在进行交流 dir直接可以看到 有\_\_proto\_\_ 就是实例对象 有prototype就是构造函数 :9:继承的四种方式 (1)原型继承 (2)借用构造函数继承 (3)组合继承 直接代码演示组合继承 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2][] (4)拷贝继承 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3][] /* * 原型作用:数据共享,目的:为了节省内存空间 * 继承 目的:为了节省内存空间 * 原型继承:改变原型指向 * 借用构造函数继承:主要解决属性问题 * 组合继承:原型继承+借用构造函数继承 * 技既能解决属性又能解决方法继承 * 拷贝继承:就是把对象中需要共享的属性或方法,直接遍历的方式赋值到另一个对象中 面试: 原型/原型链/构造函数/实例/继承 原型: `实例对象中有个属性,__proto__,也是对象,叫原型,不是标准的属性,浏览器使用的(所以存在兼容问题) 构造函数中也有这个属性 prototype,也是对象,叫原型,,是标准属性,程序员用的` `原型链:原型链是一种关系,是实例对象和原型对象之间的一种关系,通过__proto__练习` 构造函数:构造函数的主要作用是创建对象;一般函数命名以大写开头 构造函数(Person)----实例化对象(new) ---初始化赋值 实例:new一个对象 原型的作用: 1:数据共享,节省内存空间 2:为了实现继承 继承:四种继承方式 原型继承: Student.prototype = new Person() 因为是改变原型指向来实现的继承,直接初始化了属性,继承过来的值都一样,所以这就是问题 构造函数继承: function Student(name,age,score) Person.call(this,name,age) 解决了属性继承,并且赋值不重复的问题 缺陷:父级类别中的方法不能继承 组合继承: 原型继承+借用构造函数继承 技既能解决属性又能解决方法继承 拷贝继承: 把一个对象的属性和方法,通过遍历的方式,放到另一个对象中 用原型链实现继承有什么缺点,怎样解决? 因为是改变原型指向来实现的继承,直接初始化了属性,继承过来的值都一样,所以这就是问题 通过结合借用构造函数来实现继承,每次实例化对象的时候,进行赋值,但是由于父类级别的方法不能继承,这个时候,用原型继承就ok [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]: /images/20210812/3f7e582bc17f4e978ada6e736f9637d8.png [20190619172302976.png]: /images/20210812/b2a1dc42b911449ca021fafca23eed10.png [20190619173403220.png]: /images/20210812/472e2c3291724e2688f9cd5657369127.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1]: /images/20210812/52a012e06a504876bc9d2d306907d267.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2]: /images/20210812/a5a80dec4be3400085c39f53ec768620.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3]: /images/20210812/ac955a27700e4e94a0b4a84656a3d81f.png
相关 js继承 js继承的几种方式 1原型链继承 原型链继承是比较常见的继承方式之一,其中涉及的构造函数、原型和实例,三者之间存在着一定的关系,即每一个构造函数都有一个原型对象,原 素颜马尾好姑娘i/ 2023年01月09日 12:42/ 0 赞/ 16 阅读
相关 JS继承 1.原型链继承 2.借用构造函数继承(经典继承) 3.组合继承 4.原型式继承 5.寄生式继承 6.寄生组合式继承 既然要实现继承,那么首先我们得有一个父 ゞ 浴缸里的玫瑰/ 2022年12月05日 00:50/ 0 赞/ 186 阅读
相关 js 继承 $(document).ready(initPage); function initPage() { extend(C - 日理万妓/ 2022年07月21日 02:20/ 0 赞/ 207 阅读
相关 js--继承 每个类有3部分, 第一部分是构造函数内的,供实例化对象复制用的 第二部分是构造函数外的,直接通过点语法添加,这是供类使用的,实例化对象访问不到 第三部分是类的原型中 ╰半夏微凉°/ 2022年07月11日 01:47/ 0 赞/ 210 阅读
相关 js继承 1、prototype方式 var BaseClass = function () \{ this.name = "3zfp"; ゞ 浴缸里的玫瑰/ 2022年06月09日 04:08/ 0 赞/ 189 阅读
相关 js继承:一网打尽js继承 转载:原地址:[https://mp.weixin.qq.com/s/NkxW367Znl5Hb47\_vv8Eeg][https_mp.weixin.qq.com_s_Nkx 刺骨的言语ヽ痛彻心扉/ 2022年03月12日 07:24/ 0 赞/ 268 阅读
相关 js继承 var animal=function(name){ //构造函数 this.name=name; this.sayhe 拼搏现实的明天。/ 2021年12月22日 02:43/ 0 赞/ 282 阅读
相关 js-----继承 1:创建的三种方式 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub 曾经终败给现在/ 2021年09月20日 06:56/ 0 赞/ 378 阅读
相关 js继承 为何要继承 希望子类对象拥有父类的属性和方法 构造函数的继承 call写在子类构造函数中,将父构造函数中this指向由window指向子对象,并且执行父构造函数中 傷城~/ 2021年09月03日 06:53/ 0 赞/ 426 阅读
还没有评论,来说两句吧...