精华内容
下载资源
问答
  • JavaScript原型链继承
    2022-01-25 22:07:52

    JavaScript原型链的核心思想为子类的原型对象是父类的一个实例对象。

    详细做法:

    1.分别定义父类和子类的构造函数

    2.将子类的原型对象改为父类的一个实例对象

    function p1(name) {
        console.log('father');
    }
    function p2(age) {
        console.log('son');
    }
    p2.prototype = new p1();

    3.将子类的原型对象的constructor属性的值改为子类的构造函数(重点)

            通过代码调试可以知道,每个对象的原型对象都有一个constructor属性指向该对象的构造函数。

            而当更改了对象的原型对象后,constructor会随之消失,所以需要重新定义constructor属性,让其重新指向该对象的构造函数。

            此时在父类的原型上添加方法,实例化子类对象,子类对象可以调用父类的方法。

            该继承方法的缺点是只能继承一个父类。

    更多相关内容
  • 本文实例讲述了js对象继承之原型链继承的用法。分享给大家供大家参考。具体分析如下: 代码如下:[removed] //定义猫的对象 var kitty = {color:’yellow’,bark:function(){alert(‘喵喵’);},climb:...
  • JS原型链继承

    千次阅读 2019-01-09 18:23:43
    再讲述JS原型链继承之前,我希望大家能够先理解 《函数,函数原型和函数实例之间的关系》,这样有助于大家理解JS原型链继承的原理,下面先看一张图吧,咱们看图说话: 如果大家看完了 《函数,函数原型和函数实例...

    再讲述JS原型链继承之前,我希望大家能够先理解 《函数,函数原型和函数实例之间的关系》,这样有助于大家理解JS原型链继承的原理,下面先看一张图吧,咱们看图说话:
    JS原型链继承

    如果大家看完了 《函数,函数原型和函数实例之间的关系》 这篇文章,应该多少能明白原型链继承的原理了。

    如上图所示: Personal 对象想要继承 Main 对象,则通过将 Main 的实例赋值给 Personal 的原型对象 :

    Personal.prototype = new Main () ;
    

    如此 Personal原型对象 就能通过 Main 对象的实例中的 [[Prototype]] 来访问到 Main原型对象 中的属性和方法了,而此时大家注意,Personal原型对象 则与 Personal函数 断开了联系,因为Personal原型对象被重新赋值了,所以还需要重新将Personal函数Personal原型对象建立联系:

    Personal.prototype.constructor = Personal ;
    

    完整代码如下:

    function Main () {
    }
    Main.prototype.sex = '男' ;
    Main.prototype.eat = function () {
    	console.log('Main eat ...')
    }
    
    
    function Personal () {}
    Personal.prototype.name = 'hwk';
    Personal.prototype.sayName = function () {
    	console.log('Personal name')
    }
    
    // 继承
    Personal.prototype = new Main();
    Personal.prototype.constructor = Personal;
    
    var p = new Personal();
    console.log(p.sex ) ; // 男
    console.log(p.name) ; // undefined
    p.eat();			  // Main eat ...
    p.sayName ();		  // Uncaught TypeError:p.sayName is not a function 
    

    运行如上代码你会发现 p.nameundefined , p.sayName 这个方法没找到,原因在于我们后面重新赋值了 Personal.prototype = new Main(); 因此找不到一开始定义在 Personal.prototype 上的name属性和sayName方法,因此在使用原型链继承的时候,要在继承之后再去在原型对象上定义自己所需的属性和方法:

    // 先继承
    Personal.prototype = new Main();
    Personal.prototype.constructor = Personal;
    
    // 后定义属性和方法
    Personal.prototype.name = 'hwk';
    Personal.prototype.sayName = function () {
    	console.log('Personal name')
    }
    
    // 正确输出
    console.log(p.sex ) ; // 男
    console.log(p.name) ; // hwk
    p.eat();			  // Main eat ...
    p.sayName ();		  // Personal name
    

    此时 Personal的实例 已经可以访问到父类Main原型对象中的方法和属性了,这也就是原型链继承的方式,希望对大家有帮助!

    PS:在原型对象上定义属性和方法,其所有的构造函数实例都能共享原型上的属性和方法,因此如果某一个构造函数实例对象修改了原型对象上的属性值和方法,则也会影响其他实例对象。

    展开全文
  • 本文实例分析了javascript原型链继承的用法。分享给大家供大家参考。具体分析如下: 代码如下:function Shape(){   this.name = ‘shape’;   this.toString = function(){   return this.name;   }  }  ...
  • 原型链是实现继承的一种基础方式,是原型搜索机制的扩展。本文以基本原理,代码实现,结构图解三种方式诠释,无论基础如何,都能通过本文对js原型链继承达到更深入的理解。


    原型链是实现继承的一种方式,扩展了原型搜索机制,使搜索可以继承向上,搜索原型的原型。

    一 原型搜索机制

    在原型搜索机制中,构造函数,实例,和原型对象的关系为,原型对象是构造函数的一个属性prototype,原型对象中有一个属性constructor指回构造函数,构造函数生成的实例中具有指针指向构造函数上的原型对象。

    1.1 代码实现

    // 构造函数
    function person(name, color){
        this.name = name;
        this.color = color;
    }
    // 向默认的原型对象中添加值
    person.prototype.getColor = function(){
        return this.color;
    }
    // 通过构造函数构建实例 实例中含有指向原型对象的指针
    var personOne = new person("tom", "red");
    
    console.log("来自构造函数中的属性", personOne.name) // "tom"
    console.log("来自原型对象中的属性", personOne.getColor()) // "red"
    

    1.2 结构图解

    构造函数,原型对象,实例的关系如下。

    在这里插入图片描述

    1.3 搜索机制

    当搜索一个属性/方法时,先搜索实例本身,如果实例本身没有找到,再从指针找到其指向的原型对象,向上查找的特性与作用域链相似。

    也就是说,如果在实例中设置了要查找的属性名,就不会再向上查找。

    ... ...
    personOne.getColor = function(){
    	return "实例中的属性";
    }
    console.log(personOne.getColor()); // "实例中的属性"
    ... ...
    

    这时候如果没找到,并且该原型对象中也有一个指向另一个原型对象的指针,就从指针向上搜索原型的原型,直到原型链的末端,也就是原型不再包含指向另一个原型的指针为止。

    二 原型链代码实现

    从这里看出,原型链是由指向原型对象的指针将多个原型对象连接起来,上面指出,当我们new一个A实例,实例中就包含一个指向原型对象的指针。

    如果我们将该实例赋值为另外一个对象实例B的原型对象,原型链就构成了,查找顺序为。
    B 实 例 − > B 原 型 ( A 实 例 ) − > A 原 型 B实例->B原型(A实例)->A原型 B>B(A)>A

    2.1 代码实现

    在下面的代码中,访问objB的实例对象obj时,通过原型链,最终输出了objA的原型对象中的值。

    function objA(){
        this.title = 'A';
    }
    
    objA.prototype.name = "objA-prototype";
    
    function objB(){
        this.title = 'B';
    }
    
    objB.prototype = new objA();
    
    var obj = new objB;
    console.log(obj.name); // objA-prototype
    

    2.2 结构图解

    在这里插入图片描述

    2.3 链条拓展

    我们可以通过将B实例替换C对象实例的原型对象的方式来拓展该原型链。拓展后查找顺序为。
    C 实 例 − > C 原 型 ( B 实 例 ) − > B 原 型 ( A 实 例 ) − > A 原 型 C实例->C原型(B实例)->B原型(A实例)->A原型 C>C(B)>B(A)>A
    原型链就是这样实现继承的。

    在上面公式中,在C实例向A原型搜索的过程中,只要在某一个地方获得了一个同名属性,就会取该属性,而不再向上搜索,也就是说,在下层原型中添加上层原型链已有的方法会覆盖方法。

    三 原型链的缺点

    原型链也有一些缺点,如原型链中的属性是共享的,当修改某一个原型对象中的值时,下层所以实例在获取该值时都会变化,因为大家都是通过指针读取原型对象中的值。

    由于这种缺陷,一般不单独使用原型链继承。

    有一些缺点,如原型链中的属性是共享的,当修改某一个原型对象中的值时,下层所以实例在获取该值时都会变化,因为大家都是通过指针读取原型对象中的值。

    由于这种缺陷,一般不单独使用原型链继承。

    其他的继承方法请关注本专栏,等待后续文章。

    展开全文
  • JS原型链继承

    2022-04-05 21:48:31
    一、原型与原型链 原型(prototype):所有函数都有的属性,数组/对象这种数据类型是没有的,属性值是一个普通的对象, 原型链(__proto__):所有引用类型都有该属性,属性值是一个普通对象,且该数属性指向它的构造函数的...

    一、原型与原型链

    1. 原型(prototype):所有函数都有的属性,数组/对象这种数据类型是没有的,属性值是一个普通的对象,
    2. 原型链(__proto__):所有引用类型都有该属性,属性值是一个普通对象,且该数属性指向它的构造函数的prototype)
    3. 一些浏览器对__proto__有新的表现方式 [[prototype]]

    原型产生的原因:

    实例化其实是一个很耗费内存空间的,通过构造函数去实例对象的时候,每一个对象中的属性和方法都是在自己的空间,那么当有多个对象的时候,这些属性和方法就有多少个在各自的空间中存在在,所以很浪费空间,因此,为了解决这个问题,实现数据共享,原型就产生了。在它们的原型对象上添加属性和方法所有实例对象都能用

    原型中this的指向问题:

    1. 构造函数中的this就是实例对象(谁调用的就是谁的)
    2. 原型对象中的方法中的this就是实例对象

    原型的作用

    1. 节省内存空间
    2. 实现继承(通过new关键字)

    原型链的查找规则

            从当前实例属性去查找,如果找到了就返回,否则顺着原型链一层一层往上找,直到找到null为止

    二、JS继承

    1. js中的继承是通过构造函数去模拟类,然后通过原型来实现的
    2. 属性的继承体现在构造函数的继承上,基本思路:子类的构造函数调用父类的构造函数

    展开全文
  • javaScript原型链继承

    2020-10-29 23:31:43
    // 实现原型链的基本模式 function Super() { this.value = 'Super'; } Super.prototype.getSuperValue = function () { return this.value; } function Sub() { this.a = 'a' this.subValue = 'Sub'; } Sub....
  • 本篇文章小编将为大家介绍JS继承--原型链继承和类式继承,有需要的朋友可以参考一下
  • JS原型链继承

    2022-03-06 00:36:17
    JS原型链继承 认识对象的原型 [[Get]]:JS的存取描述符——get方法,在获取对象属性时会自动调用 JavaScript当中每个对象都有一个特殊的内置属性[[prototype]],这个特殊的属性指向另外一个对象 [[prototype]]...
  • js继承 - 原型链继承

    2021-01-17 18:58:05
    继承js里面的一个重头戏,高程里面介绍了六种实现继承的方式,我们先来看一下通过原型链实现继承的方式。 在js 创建对象的几种模式–原型模式里面介绍了构造函数,原型对象,和实例三者之间的关系,我们来简单回顾...
  • 加上这行代码: 我们发现虽然__proto__改过来了,但是 constructor还没有改过来,所以还需要继续改造: 原型链继承的缺点:
  •  JavaScript中实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实例即可,即“子类型.prototype = new 父类型();”,实现方法如下: // 为父类型创建构造函数 function SuperType() { thi
  • 本文实例分析了Javascript原型链的原理。分享给大家供大家参考,具体如下: 一、JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一...
  • JavaScript通过原型链实现继承
  • 主要介绍了JavaScript原型链继承操作,结合实例形式总结分析了javascript原形链与继承的相关概念、使用方法及操作注意事项,需要的朋友可以参考下
  • js原型与原型链继承的理解 1. 原型链的概念 ECMAScript 中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、...
  • javascript 的七种继承方式(一)原型链

    万次阅读 多人点赞 2020-08-19 10:57:59
    ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简述一下构造函数、原型和实例的关系:每个构造函数都有一个原型对象,反...
  • js 原型链继承

    2019-07-04 16:43:47
    构造函数的prototype的__proto__默认指向Object.prototype,是继承Object。 function Animal(age){ this.age = age } Animal.prototype.getAge = function(){ return this.age + ", getAge, prototype" } Animal...
  • js原型链继承js中的重点,所以我们通过以下三个例子来进行详细的讲解。一起跟随小编过来看看吧,希望对大家有所帮助。
  • 原型链继承(对象间的继承)类式继承(构造函数间的继承) 原型链继承: 代码如下://要继承的对象var parent={name : “baba” say : function(){ alert(“I am baba”);}} //新对象var child = ...
  • JS学习笔记 原型链和利用原型实现继承

    万次阅读 多人点赞 2018-05-12 09:53:41
    原型链原型链是一种关系,实例对象和原型对象之间的关系,关系是通过原型(__proto__)来联系的实例对象中有__proto__,是对象,叫原型,不是标准的属性,浏览器使用,并且有的游览器不支持构造函数中有prototype属性,也是...
  • JavaScript 原型链继承面试题

    千次阅读 2020-10-29 02:00:37
    JavaScript 原型链继承问题 JavaScript 中没有类的概念的,主要通过原型链来实现继承。通常情况下,继承意味着复制操作,然而 JavaScript默认并不会复制对象的属性,相反,JavaScript只是在两个对象之间创建一个...
  • JavaScript是基于原型链继承的,忘掉类的继承,从原型链入手。 普通对象 函数对象 JavaScrip只有一种结构:对象 通过new Function()创建的对象都是函数对象,其他都是普通对象。 每个对象都有 __proto__属性,,...
  • javascript 原型链继承

    2017-01-08 14:22:50
    javascript 原型链继承
  • 主要介绍了javascript原型链继承的概念,以及使用原型链实现继承、经典继承、组合式继承、寄生组合式继承。非常实用,是篇非常不错的文章,这里推荐给大家。
  • 主要介绍了JavaScript使用原型和原型链实现对象继承的方法,简单讲述了javascript原型原型链的原理,并结合实例形式详细分析了javascript中对象继承的常见实现技巧,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 58,152
精华内容 23,260
关键字:

js 原型链继承

友情链接: RLS.rar