精华内容
下载资源
问答
  • javascript原型链理解

    2018-08-01 11:08:23
    但是 在ECMAScript中没有方法签名,无法实现接口继承,只支持实现继承,而实现继承主要是依靠原型链来实现。 2.原型链基本思路: 利用原型让一个引用类型继承另一个引用类型的属性和方法。 每个构造函数都有一个...

    1.在OO语言中,继承的方式支持两种:接口继承与实现继承。

    接口继承:继承方法签名,实现继承:继承实际方法。

    但是 在ECMAScript中没有方法签名,无法实现接口继承,只支持实现继承,而实现继承主要是依靠原型链来实现。

    2.原型链基本思路:

    利用原型让一个引用类型继承另一个引用类型的属性和方法。

    每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数想指针(constructor),而实例对象都包含一个指向原型对象的内部指针(__proto__)。如果让原型对象等于另一个类型的实例,此时的原型对象将包含一个指向另一个原型的指针(__proto__),另一个原型也包含着一个指向另一个构造函数的指针(constructor)。假如另一个原型又是另一个类型的实例……这就构成了实例与原型的链条。

    3.基本图谱

    4.动手验证:

    <html>
    
    <body>
    <script>
    function son(name,age){
      father.call(this,name,age);
    }
    son.prototype=Object.create(father.prototype);
    son.prototype.constructor = son;
    function father(name,age)
    {
       this.name=name;
       this.age=age;
       this.say=function(){
         console.log("my name is"+this.name);
       }
    }
    father.prototype.show=function()
    {
         console.log(this.name +" is "+this.age);
    }
    var a=new son("sadf",24);
    console.log(a);
    a.show();
    var b=new father("sdf",90)
    b.show();
    b.say();
    console.log(b);
    </script>
    </body>
    </html>

    输出如下:

    可以看出 分为两块继承 ,一是对象本身继承(用call实现),与原型继承(用object.create 实现);

    去掉   son.prototype=Object.create(father.prototype); son.prototype.constructor = son; 原型继承这一条,会报错

     可以看出,a的原型里没有show方法;

    es6 继承

    function a(){
        class Father{
            constructor(name, age){
                 this.name = name;
                 this.age = age;
            }
    
            show(){
                console.log(`我叫:${this.name}, 今年${this.age}岁`);
            }
        };
        class Son extends Father{};
    
        let son = new Son('金角大王', 200);
        son.show();//return 我叫:金角大王, 今年200岁
    console.log(son)
    };
    a();

    输出:

     

     

     

    展开全文
  • js 原型链理解

    2021-03-19 20:22:13
    每一个对象都有它的原型 这个公共属性(proto)通过原型我们可以访问内部的所有属性和方法 例如: let sunArry = [1,1,1,1,1,1,1] console.log(sunArry) 也就是说: sunArr._proto_===Array.prototype // true ...

    每一个对象都有它的原型 这个公共属性(proto)通过原型我们可以访问内部的所有属性和方法

    例如:

    let sunArry = [1,1,1,1,1,1,1]
    console.log(sunArry)
    

    在这里插入图片描述
    也就是说:

    sunArr._proto_===Array.prototype   // true
    

    对于其他对象也是一样比如 Date(),Number()

    在JavaScript中我们常用new来构造函数例如

    const Car = function(color, model, dateManufactured) {
      this.color = color;
      this.model = model;
      this.dateManufactured = dateManufactured;
    };
    Car.prototype.getColor = function() {
    	return this.color;
    };
    Car.prototype.getModel = function() {
    	return this.model;
    };
    Car.prototype.carDate = function() {
    	return `This ${this.model} was manufactured in the year ${this.dateManufactured}`
    }
    let firstCar = new Car('red', 'Ferrari', '1985');
    console.log(firstCar);
    console.log(firstCar.carDate());
    

    在这里插入图片描述
    上面的例子中,方法getColor,carDate,getModel都是对象(函数)Car的方法,而Car的实例对象firstCar可以继承Car原型上的一切方法和属性。

    简单来说 就是每一个构造对象都有自己的私有属性_proto_,而_proto_都会指向它的构造函数的原型对象prototype,同时prototype又有他的私有属性_proto_,直到为null,这一层层的就是原型链

    展开全文
  • javaScript原型链理解

    2015-05-07 17:16:00
    对于javascript原型链,以前都觉得是个很深的东西,一直没有理解很明白,今天看了一些介绍后,发现这张图,表示再没有什么语言能比这张图说得清楚了。 看了这张图后突然对javascript有了质的理解。 ...

      对于javascript原型链,以前都觉得是个很深的东西,一直没有理解很明白,今天看了一些介绍后,发现这张图,表示再没有什么语言能比这张图说得清楚了。

    看了这张图后突然对javascript有了质的理解。

     

                                                                     

     

    javascript的原型链有显式和隐式两种:
    显式原型链:即我们常见的prototype;
    隐式原型链:在一般环境下无法访问,即不可见,在FireFox下可以通过__proto__方式访问;隐式原型链用于javascript引擎内部对原型链的搜寻,通过显示原型链来设置;
     

    一、prototype和__proto__的概念

      prototype是函数的一个属性(每个函数都有一个prototype属性),这个属性是一个指针,指向一个对象。它是显示修改对象的原型的属性。

      __proto__是一个对象拥有的内置属性(请注意:prototype是函数的内置属性,__proto__是对象的内置属性),是JS内部使用寻找原型链的属性。

          用chrome和FF都可以访问到对象的__proto__属性,IE不可以。

    二、new 的过程
      
    var Person = function(){};
    var p = new Person();

       new的过程拆分成以下三步:
       (1) var p={}; 也就是说,初始化一个对象p
       (2) p.__proto__ = Person.prototype;
       (3) Person.call(p); 也就是说构造p,也可以称之为初始化p

    关键在于第二步,我们来证明一下:

    var Person = function(){};
    var p = new Person();
    alert(p.__proto__ === Person.prototype);

        这段代码会返回true。说明我们步骤2是正确的。

     

    三、示例

        var Person = function(){};
        Person.prototype.sayName = function() {
            alert("My Name is Jacky");
        };
    
        Person.prototype.age = 27;
        var p = new Person();
        p.sayName();

    p是一个引用指向Person的对象。我们在Person的原型上定义了一个sayName方法和age属性,当我们执行p.age时,会先在this的内部查找(也就是构造函数内部),如果没有找到然后再沿着原型链向上追溯。

    这里的向上追溯是怎么向上的呢?这里就要使用__proto__属性来链接到原型(也就是Person.prototype)进行查找。最终在原型上找到了age属性。

    转载于:https://www.cnblogs.com/nicholaszjb/p/4485482.html

    展开全文
  • JS原型链理解

    2020-10-16 16:41:34
    1.理解Function和Object (1)问:Function和Object是构造函数吗? 答:是,所以Function和Object都有prototype属性 (2)问:Function和Object的prototype属性有关系吗?有何关系? 答:有,先有的Object.prototype且...

    1.理解Function和Object

    (1)问:Function和Object是构造函数吗?
    答:是,所以Function和Object都有prototype属性
    (2)问:Function和Object的prototype属性有关系吗?有何关系?
    答:有,先有的Object.prototype且Object.prototype.__ proto __ ==null ,Function.prototype由Object.prototype构造,所以Function.prototype.__ proto __ ==Object.prototype
    (3)问:Function和Object是对象吗?
    答:是,所以Function和Object均有__ proto __ 属性
    (4)问:那Function和Object是由谁构造的?
    答:Function和Object是由Function.prototype构造的,所以Function. __ proto __ ==Object. __ proto __ ==Function.prototype

    2.理解原型链

    (1)问:何为原型?
    答:原型就是函数的prototype属性
    (2)问:如何形成原型链?
    答:对象是由构造函数创建的,每个函数都有一个prototype属性,每个对象都有一个__ proto __ 属性且指向其构造函数的prototype属性,而prototype也是一个对象也有__ proto __ 属性,这样就会出现形如obj.__ proto __ .__ proto__的形式,就是所谓的原型链。
    (3)举个例子
    例:a=[1,2,3]
    首先a是一个对象,它的构造函数是Array,那么a.__ proto __ ==Array.prototype,且Array.prototype也是一个对象也有__ proto __ 属性,且Array.prototype.__ proto __ ==Object.prototype。所以一个数组对象即可以访问Array原型上的属性也可访问Object原型上的属性。

    3.原型链结构图

    Fig.1. 原型链结构图

    4.控制台输出验证

    Fig.2. 控制台输出验证

    展开全文
  • JS原型链理解与实用

    2020-07-16 15:28:19
    关于JS原型链自己也简单总结一下! 首先先上一张图,我第一次看这张图的时候原本就懵的我更懵了。可是我想说的是,尽管再懵,也还是要慢慢自己理解,最后才能拨开云雾见天日。 目前看不清除图没关系。先解释两个...
  • 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明你...
  • 理解JavaScript原型链

    2020-10-21 06:19:21
    简单说一说对JavaScript原型链理解,希望对大家学习JavaScript原型链有所帮助,具体内容如下
  • JS原型链怎么理解

    2020-10-22 01:13:14
    本文重点给大家介绍javascript中的原型链知识,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看下吧
  • 主要针对javascript中的原型、原型链深入理解,原型是JavaScript中一个比较难理解的概念,本文为大家解决这个难题,感兴趣的小伙伴们可以参考一下
  • 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明你...
  • 主要介绍了小白谈谈对JS原型链理解的相关资料,需要的朋友可以参考下
  • 主要介绍了javascript 原型与原型链理解,结合实例形式分析了javascript 原型与原型链的原理、使用方法及相关操作注意事项,需要的朋友可以参考下
  • JS原型、原型链理解(二) 上回书说到原型,这次自我总结一下原型链 原型链:因为每个对象和原型都有原型,对象的原型指向原型对象,而父的原型又指向父的父,这种原型层层连接起来的就构成了原型链。说白了,其实...
  • 主要介绍了对javaScript原型链理解,以实例形式对javaScript原型链的概念及相关使用技巧做了较为浅显易懂的分析,需要的朋友可以参考下
  • js原型链快速理解

    千次阅读 2020-01-08 09:55:45
    理解原型链首先需要知道js中的两个对象:普通对象和函数对象;(函数对象的本质还是一个普通对象,它有着特殊的属性) 普通对象: let a = {}; let b = new Object(); function C(){} let c = new C(); 上面的a,...
  • 主要介绍了javascript 原型与原型链理解及应用,结合实例形式分析了javascript原型原型链的具体原理、功能、使用方法及操作注意事项,需要的朋友可以参考下
  • 主要和大家一起深入理解JS原型与原型链,原型是JavaScript中一个比较难理解的概念,本文为大家解决这个难题,感兴趣的小伙伴们可以参考一下
  • JS原型与原型链理解

    2018-07-07 17:48:29
    前几天在看那个OL3的控件封装,感觉对愿原型和原型链有点忘记,js本身是没有类这个概念,所谓函数即对象,继承这个东西主要通过对象来完成,要是在C#,Java这类语言中这个就很好理解的一,函数对象 所有引用类型...
  • JS原型、原型链理解(一) 原型:是JavaScript中一个比较难理解的概念,原型对象是包含特定类型的所有实例共享的属性和方法。原型相关的属性也比较多,对象有prototype属性,函数对象有prototype属性,原型对象有...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,787
精华内容 16,714
关键字:

js原型链理解