精华内容
下载资源
问答
  • JS原型链图

    2017-11-28 15:28:14
    原型链构析 对于每个对象,其自身创建成功后都有一个属性——__proto__,该属性表示一种关系,指向该对象构造器的原型,下面代码表示出 var demo=new Person("name",age); 的生成过程。 var demo={}; demo.__proto__...

    原型链构析
    对于每个对象,其自身创建成功后都有一个属性——__proto__,该属性表示一种关系,指向该对象构造器的原型,下面代码表示出 var demo=new Person("name",age); 的生成过程。
    var demo={};
    demo.__proto__=Person.prototype;
    Person.call(demo,"name",age);


    对于构造器 function Person(){} ,它是一个函数对象。因此,也拥有__proto__属性,该属性指向的为 Function构造器的原型 Function.prototype 。(如果你进一步思考,便会发现,其实,所有的 function Object(){} 的属性__proto__指向的,都是 Function.prototype 。)


    对于所有的原型对象,例如 Person.prototype 或 Function.prototype ,它们的__proto__属性,都对应同一个原型对象 Object.prototype 。


    而根据四大皆空的原理,所有对象原型属性__proto__指向的 Object.prototype ,其__proto__属性指向的为 null 得意

    展开全文
  • js原型链图

    2018-06-05 16:02:51
    大家可以看看,写的很好;总结下自己的所得和不解。以下几条要记住,1. js中一切皆对象,分为函数对象和普通对象两类。2. 函数对象的构造函数都是Function,普通对象的构造函数都是Object。...(重写原型时construct...

    首先,介绍一个详细博客:https://www.jianshu.com/p/a4e1e7b6f4f8;大家可以看看,写的很好;总结下自己的所得和不解。

    以下几条要记住,

    1. js中一切皆对象,分为函数对象和普通对象两类。

    2. 函数对象的构造函数都是Function,普通对象的构造函数都是Object。

    3. 实例的__proto__和构造函数的prototype永远相等。(重写原型时constructor就会变)。

    下面是本人画的一张图


    Function有点特别。有个自定义函数的相关链接没画上,下面把他写上

    function Person() {};
    var p = new Person();
    console.log(Person.prototype);
    console.log(Person.__proto__);
    console.log(Person.constructor);
    console.log(p.__proto__);
    console.log(p.constructor);
    console.log(Person.__proto__ === Function.prototype);//true
    console.log(Person.prototype.__proto__ === Object.prototype);//true

    最后一句,Person.prototype是一个普通对象,普通对象的构造函数是Object。

    下面这两段代码还是不太理解,先记住

    function Person() {}
    // 重写原型
    Person.prototype = {
        getName: function() {}
    }
    var p = new Person()
    console.log(p.__proto__ === Person.prototype) // true
    console.log(p.__proto__ === p.constructor.prototype) // false
    var animal = function(){};
    var dog = function(){};
    animal.price = 2000;
    dog.prototype = animal;
    var tidy = new dog();
    console.log(dog.price) //undefined
    console.log(tidy.price) // 2000
    console.log(animal.price) // 2000
    自己敲代码,把Function,Objective,自定义函数,实例化等等的prototype,__proto__,constructor都输出看看,然后自己在纸上关系图,基本就能理解大多数了。原型链的作用就是继承方法。实例对象会继承构造函数的原型对象上的所有方法。
    展开全文
  • JS 原型链图形详解

    2016-03-29 08:08:00
    JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要。每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解。 对象 ECMAScript做为一个高度抽象的面向对象语言,是通过对象来交互的...

    JS原型链

    这篇文章是「深入ECMA-262-3」系列的一个概览和摘要。每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解。

    对象

    ECMAScript做为一个高度抽象的面向对象语言,是通过对象来交互的。即使ECMAScript里边也有基本类型,但是,当需要的时候,它们也会被转换成对象。

    一个对象就是一个属性集合,并拥有一个独立的prototype(原型)对象。这个prototype可以是一个对象或者null。*

    让我们看一个关于对象的基本例子。一个对象的prototype是以内部的[[Prototype]]属性来引用的。但是,在示意图里边我们将会使用__<internal-property>__下划线标记来替代两个括号,对于prototype对象来说是:__proto__\。

     

    对于以下代码:

     

    basic-object.png
     

    这些prototype有什么用?让我们以原型链(prototype chain)的概念来回答这个问题。

     

    原型链

    原型对象也是简单的对象并且可以拥有它们自己的原型。如果一个原型对象的原型是一个非null的引用,那么以此类推,这就叫作原型链。

    原型链是一个用来实现继承和共享属性的有限对象链。

    考虑这么一个情况,我们拥有两个对象,它们之间只有一小部分不同,其他部分都相同。显然,对于一个设计良好的系统,我们将会重用相似的功能/代码,而不是在每个单独的对象中重复它。在基于类的系统中,这个代码重用风格叫作类继承-你把相似的功能放入类A中,然后类B和类C继承类A,并且拥有它们自己的一些小的额外变动。

    ECMAScript中没有类的概念。但是,代码重用的风格并没有太多不同(尽管从某些方面来说比基于类(class-based)的方式要更加灵活)并且通过原型链来实现。这种继承方式叫作委托继承(delegation based inheritance)(或者,更贴近ECMAScript一些,叫作原型继承(prototype based inheritance))。

    跟例子中的类ABC相似,在ECMAScript中你创建对象:a,b,c。于是,对象a中存储对象b和c中通用的部分。然后b和c只存储它们自身的额外属性或者方法。

     

    var a = { x: 10, calculate: function (z) {
                   return this.x + this.y + z }
               };
    var b = { y: 20, __proto__: a };
    var c = { y: 30, __proto__: a };
    // call the inherited method
    b.calculate(30);  // 60
    c.calculate(40);  // 80
     

    规则很简单:如果一个属性或者一个方法在对象自身中无法找到(也就是对象自身没有一个那样的属性),然后它会尝试在原型链中寻找这个属性/方法。如果这个属性在原型中没有查找到,那么将会查找这个原型的原型,以此类推,遍历整个原型链(当然这在类继承中也是一样的,当解析一个继承的方法的时候-我们遍历class链( class chain))。第一个被查找到的同名属性/方法会被使用。因此,一个被查找到的属性叫作继承属性。如果在遍历了整个原型链之后还是没有查找到这个属性的话,返回undefined值。

     

    注意,继承方法中所使用的this的值被设置为原始对象,而并不是在其中查找到这个方法的(原型)对象。也就是,在上面的例子中this.y取的是b和c中的值,而不是a中的值。但是,this.x是取的是a中的值,并且又一次通过原型链机制完成。

    如果没有明确为一个对象指定原型,那么它将会使用__proto__的默认值-Object.prototype。Object.prototype对象自身也有一个__proto__属性,这是原型链的终点并且值为null。

    下一张图展示了对象a,b,c之间的继承层级:

    prototype-chain.png

    注意: ES5标准化了一个实现原型继承的可选方法,即使用Object.create函数:

    var b = Object.create(a, {y: {value: 20}}); var c = Object.create(a, {y: {value: 30}});

    你可以在对应的章节获取到更多关于ES5新API的信息。 ES6标准化了 __proto__属性,并且可以在对象初始化的时候使用它。

    通常情况下需要对象拥有相同或者相似的状态结构(也就是相同的属性集合),赋以不同的状态值。在这个情况下我们可能需要使用构造函数(constructorfunction),其以指定的模式来创造对象。

    构造函数

    除了以指定模式创建对象之外,构造函数也做了另一个有用的事情-它自动地为新创建的对象设置一个原型对象。这个原型对象存储在ConstructorFunction.prototype属性中。

    换句话说,我们可以使用构造函数来重写上一个拥有对象b和对象c的例子。因此,对象a(一个原型对象)的角色由Foo.prototype来扮演:

    // a constructor function
    function Foo(y) {
    this.y = y;
    }
    Foo.prototype.x = 10;
    Foo.prototype.calculate = function (z) {
          return this.x + this.y + z;
    };
    
    var b = new Foo(20);
    var c = new Foo(30);
    // 调用继承方法
    b.calculate(30);  // 60
    c.calculate(40);  // 80
    console.log( b.__proto__ === Foo.prototype)  // true
    console.log(c.__proto__ === Foo.prototype)   // true
    
    //同时 Foo.prototype  同时会创建一个特殊的属性 constructor,
    b.constructor === Foo  // true
    c.constructor === Foo, // true
    Foo.prototype.constructor === Foo // true
    b.calculate === b.__proto__.calculate  // true
    b.__proto__.calculate === Foo.prototype.calculate  // true

     

    这个代码可以表示为如下关系:

     

     

     这张图又一次说明了每个对象都有一个原型。构造函数Foo也有自己的__proto__,值为Function.prototypeFunction.prototype也通过其__proto__属性关联到Object.prototype。因此,重申一下,Foo.prototype就是Foo的一个明确的属性,指向对象b和对象c的原型。

     

    正式来说,如果思考一下分类的概念(并且我们已经对Foo进行了分类),那么构造函数和原型对象合在一起可以叫作「类」。实际上,举个例子,Python的第一级(first-class)动态类(dynamic classes)显然是以同样的属性/方法处理方案来实现的。从这个角度来说,Python中的类就是ECMAScript使用的委托继承的一个语法糖。

    注意: 在ES6中「类」的概念被标准化了,并且实际上以一种构建在构造函数上面的语法糖来实现,就像上面描述的一样。从这个角度来看原型链成为了类继承的一种具体实现方式:

     
    // ES6
    
    class Foo {
    
    constructor(name) {
         this._name = name;
              }
         getName {
              return this._name;
         }
    }
    class Bar extends Foo {
         getName {
              return super.getName + ' Doe';
         }
    }
    var bar = newBar('John');
    console.log(bar.getName); // John Doe

     

    转自JavaScript. The core.
    http://www.yidianzixun.com/n/0CjThYEE?s=9&appid=xiaomi&ver=3.5.5&utk=03smxf0g

    转载于:https://www.cnblogs.com/jiuyi/p/5331592.html

    展开全文
  • JS原型链 原型 详解

    2021-04-18 21:23:25
    JavaScript JS原型链 详解 - 显示原型和隐式原型 每个函数(function)都有prototype,即显示原型,指向原型对象,默认为空Object实例,Object原型除外。相当于在创建时,执行了 this.prototype={} 每个实例对象...

    JavaScript JS原型链 图详解

    看懂这个图,原型链你绝对懂

        function Fn() {
        }
        Fn.prototype.n = 1;
        var fn = new Fn();
        Fn.prototype = {}
        var fn2 = new Fn();
    
        function foo() {
        }
        console.log(Fn instanceof Function);  //true 
        console.log(fn instanceof Function);  //false-->Object
        console.log(foo instanceof Function);  //true
        console.log(Function instanceof Function);  //true !!!
        console.log(Object instanceof Function);  //true!!!
        console.log(Function instanceof Object);  //true
        console.log(Object instanceof Object);  //true
    
    
        console.log(foo.__proto__ == Function.__proto__)    //true
        console.log(Object.__proto__ == Function.__proto__)    //true
        console.log(Object.constructor == Function)    //true
        console.log(foo.__proto__.constructor == Function.__proto__.constructor)    //true
    
        console.log(Function.prototype == Function.__proto__);  //true
        console.log(Function == Function.__proto__.constructor);  //true
        console.log(foo == Function.__proto__.constructor);  //false
        console.log(Object.__proto__.constructor instanceof Function);  //true
    

    - 显示原型和隐式原型

    1. 每个函数(function)都有prototype,即显示原型,指向原型对象,默认为空Object实例,Object原型除外。相当于在创建时,执行了 this.prototype={}
    2. 每个实例对象(instance)有__proto__,即隐式原型,指向类的原型对象,相当于在创建对象时,执行了 this.__proto__=类.prototype
      原型对象中有一个属性constructor构造器,指向函数对象。

    - constructor属性

    1. 原型对象有一个constructor属性,指向函数对象。
    2. 如上图所示,Function.prototype.constructor==Function不能是foo。

    - 方法一般定义在原型中,属性一般通过构造函数定义在对象上

    展开全文
  • 关于js原型链的问题,网上的文章有很多,但是大多数对于初学者来说晦涩难懂。没有结合实例,看起来总是没有什么概念,一下是我结合一个简单的例子,绘出的原型,如有不对,欢迎指正。 代码 代码很简单,一个构造...
  • js 原型 原型链图

    2020-03-31 15:44:30
    每一个构造函数都有prototype指向当前构造函数的原型对象 每一个实例对象都有__proto__,指向当前实例对象构造函数的原型对象prototype 原型对象也是对象也有__proto__属性,指向原型对象构造函数的原型对象即Object...
  • js原型链流程

    2021-04-10 16:48:12
    原型链流程 通过new关键字将构造函数生成实例对象
  • 一张搞定js原型链

    2021-03-07 21:26:14
    一张搞定js原型链 1: 构造函数才有prototype 2: 对象会有__proto__ 指向其原型 3: 原型的constructor指向其构造函数 4: 原型的终点是null 终点在在于理解prototype, proto, constructor的指向
  • JS原型链 解构(

    2019-03-23 02:36:17
    JS原型链 解构() 网上关于原型链的说明有很多 也有各种 但是刚接触原型链不久的同学看着会头疼 有的帖子干脆自己都没试过对不对就直接把别人的copy过来了 今天我也尝试把原型链画了一张,尽量让大家看的舒服...
  • js原型链

    2019-11-03 13:36:48
    了解js原型链之前先来复习一下js创建对象的方式有哪些 1.通过字面量的形式创建对象 2.通过构造函数创建对象 3.通过Object.create 原型,构造函数,实例,原型链 它们之间有什么关联呢?如下 所有引用...
  • JS原型链概况 JS的构造函数(即一普通的Function),可以理解为面向对象的一个Class, 这里就把Function都叫做Class吧。文字表现太生涩,没有图片理解形象。 function Father() { this.info = ["Zero"] } 1-1 这个...
  • js 原型链

    2021-04-19 17:37:25
    这个绕来绕去的线是不是很恶心呢?那就先别管这些了,等整个逻辑我们梳理完就... 这个操作被委托在整个原型链上,这个就是我们说的原型链了。 二、原型指针 我们知道了原型的概念,接下来我们就照着上面的...
  • JS原型链继承

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

    2020-06-05 15:14:19
    JS 原型链,画了张图,终于理清楚各种关系有木有 写在最后: __proto__是每个对象都有的一个属性,而prototype是函数才会有的属性!!! function Person() { } 是函数 var person = new Person(); // person 是...
  • JS原型&原型链】一张搞定!

    千次阅读 2019-02-20 23:53:15
    原型链图 如果你看到这张图一脸懵,不要怕,往下看,下面会一步一步教你认识原型&amp;amp;amp;amp;原型链 前置知识 js的初学者一般很难理解原型和原型链的概念,但原型和原型链又是js中最重要的点之一。从...
  • JS原型链

    2018-03-12 10:41:19
    所谓原型链,指的就是中的proto这一条指针链!原型链的顶层就是Object.prototype,而这个对象的是没有原型对象的。可在chrome的控制台里面输入: Object.__proto__输出是: function Empty() {}原型链,如此而已。...
  • JS原型原型链

    2021-03-06 21:58:04
    例题二、原型链图1.构造函数2._proto_与prototype3.person → Person → Object4.完整原型链 一、prototype和__proto__的概念 1.显示原型(prototype ) 所有的函数都有一个属性,prototype 称之为函数原型 默认...
  • js原型链及其完整结构

    千次阅读 2018-12-19 15:41:06
    原型链  完整原型链      1. 函数与 Function 的关系  函数就是 Function 的实例. 即 Function 就是函数的构造函数.  实例对象有一个继承的 constructor 属性, 该方法指向就是构造函数.  自己定义一...
  • 图解js原型链

    2019-10-04 03:40:33
    js中的原型链也是前端初学者头痛的一个问题,为了通俗易懂的理解原型链,笔者认为要想理解原型链最好能通过画图的方式,有时候一胜过千言万语。 转载于:https://www.cnblogs.com/zt123123/p/7596850.html...
  • 一张搞懂js原型链

    2019-04-18 13:47:27
    1.原型、原型链 我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象(原型对象)。使用原型的好处是让所有对象实例共享(继承)它所包含的属性和方法。 2. instanceof ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 533
精华内容 213
关键字:

js原型链图