精华内容
下载资源
问答
  • 原型链什么原型链?为什么要使用原型链
    千次阅读
    2021-07-27 09:14:17

     什么是原型链?


    原型链通俗易懂的理解就是可以把它想象成一个链条,互相连接构成一整串链子!
    而原型链中就是实例对象和原型对象之间的链接。每个函数都有一个prototype属性,这个prototype属性就是我们的原型对象,我们拿这个函数通过new构造函数创建出来的实例对象,这个实例对象自己会有一个指针(_proto_)指向他的构造函数的原型对象!这样构造函数和实例对象之间就通过( _proto_ )连接在一起形成了一条链子。
     

    为什么要使用原型链呢?

    1.为了实现继承,简化代码,实现代码重用!
    2.只要是这个链条上的内容,都可以被访问和使用到!

    原型链的特点

    1、就近原则,当我们要使用一个值时,程序会优先查找离自己最近的,也就是本身有没有,如果自己没有,他就会沿着原型链向上查找,如果还没有找到,它还会沿着原型链继续向上查找,找到到达Object
    2、引用类型,当我们使用或者修改原型链上的值时,其实使用的是同一个值!
    3、JS中每个函数都存在原型对象属性prototype。并且所有函数的默认原型都是Object的实例。
    4、每个继承父函数的实例对象都包含一个内部属性_proto_。该属性包含一个指针,指向父函数的prototype。若父函数的原型对象的_proto_属性为再上一层函数。在此过程中就形成了原型链。
     

    __proto__和prototype的区别

    _proto_ :是实例对象指向原型对象的指针,隐式原型,是每个对象都会有的一个属性。
    pr

    更多相关内容
  • 原型链构造函数

    2017-07-15 17:47:03
    首先:声明的函数,是有prototype属性的。但是对象是没有prototype的。一、函数 console.dir(Foo)可以看到,有prototype属性和__proto__属性。 Foo.prototype里的constructor指向Foo自己 , __proto__指向Object....

    首先:声明的函数,是有prototype属性的。但是对象是没有prototype的。

    一、函数

    • console.dir(Foo)可以看到,有prototype属性和__proto__属性。
    • Foo.prototype里的constructor指向Foo自己 , __proto__指向Object.prototype。
    • 而Foo.__proto__指向Function.prototype

    这里写图片描述

    二、Object

    • console.dir(Object)可以看到,有prototype属性和__proto__属性。
    • Object.prototype里的constructor指向Object,__proto__指向null
    • Object.__proto__指向Function.prototype。

    三、Function 构造函数

    • console.dir(Function)可以看到,有prototype属性和__proto__属性。
    • Function.prototype里的constructor指向Function,__proto__指向Object.prototype
    • Function.__proto__指向Function.prototype。

    四、对象

    1、字面量创建对象

    • 字面量创建的对象__proto__的默认指向Object.prototype。
    • 没有prototype属性。console.log(b.prototype) 结果undefined

    这里写图片描述

    2、构造函数创建对象

        function F () {}
    
        // 方法一:重写prototype
        F.prototype = {
          //constructor: F,
          name: 'liu',
          method: function () {}
        }
    
        // 方法二:拓展prototype
        F.prototype.name = 'yong';
        F.prototype.method = function () {};
    
        var f = new F();
        console.log(f);
    • 构造函数创建对象:__proto__下有constructor和__proto__和Foo的prototype定义的属性及方法。
    • __proto__下的constructor指向Foo本身。
    • __proto__下的__proto__指向Object.prototype。

    注意:

    方法一:直接重写prototype,如果我不指定constructor,将导致如下图,没有了constructor。

    这里写图片描述

    方法二:拓展prototype,保证了constructor的正确指向。

    这里写图片描述

    五、附一张图对上面总结

    作图工具采用processOn

    这里写图片描述

    六、附示例一份和图解

    该示例原出处: Dmitry Soshnikov
    参考翻译出处: 魏志峰(@JeremyWei)翻译+投稿

        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);

    这里写图片描述

    展开全文
  • 一、什么原型链? 简单回顾下构造函数,原型和实例的关系:  每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例(instance)都包含一个指向原型对象的内部指针. ...
  •  JavaScript实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实例即可,即“子类型.prototype = new 父类型();”,实现方法如下: // 为父类型创建构造函数 function SuperType() { thi
  • Javascript不存在class的概念,它的class概念是通过构造函数(constructor)与原型链(prototype)来实现。 1.构造函数(constructor):创建对象时的初始化对象,总是与new 关键是一同出现。 构造函数存在以下...
  • 一、首先说一下什么是对象? ES把对象定义为:“无序属性的集合,其属性可以包含基本值,对象和函数”。...二、什么构造函数? ES的构造函数可以用来创建特定类型的对象,用来创建对象时初始化对象...

    一、首先说一下什么是对象?

    ES把对象定义为:“无序属性的集合,其属性可以包含基本值,对象和函数”。严格来讲,这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。正因为这样,我们可以把ES的对象想象成散列表:无非就是一组名值对,其中值可以是数据或函数。

    二、什么是构造函数?

    ES中的构造函数可以用来创建特定类型的对象,用来在创建对象时初始化对象。它的特点是,一般为大写字母开头,使用new操作符来实例化对象。

    三、什么是原型?

    我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象(例如Person.prototype原型对象),而这个对象的用途是包含可以由特定类型(如Person类型)的所有实例共享的属性和方法。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说,不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中。

    1.理解原型对象:无论什么时候,只要创建了一个新函数,就会根据一组特定规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个constructor属性,这个属性包含一个指向prototype属性所在函数的指针。

    当调用构造函数创建一个新实例后,该实例内部将包含一个指针(内部属性),指向构造函数的原型对象,我们可以通过

    对象实例.__proto__来访问该原型对象。要明确的真正重要的一点是,这个连接存在于对象实例与原型对象之间,而不是对象实例与构造函数之间。

    在网上找了一张图说明对象、构造函数、原型关系如下:

    几个的重要方法:

    1、Object.getPrototypeOf(对象实例),用于返回[[Prototype]]的值(即返回原型对象)。

    2、对象实例.hasOwnProperty(属性),用于检测一个属性是存在于实例中,还是存在于原型中,它是从Object中继承而来的,只在给定属性存在于对象实例中时,才返回true。

    3、Object.keys(对象),是ES5的方法,可以取得一个对象上的所有属性,注意如果传入的参数是对象实例,那么它只会取得实例的所有可枚举属性,如果传入的是原型对象,那么也只会取得所有可枚举原型属性。

    4.Object.defineProperty(),是ES5的方法,这个方法接收三个参数:属性所在的对象,属性的名字和一个描述符对象。其中描述符对象的属性必须是:configurable、enumerable、writable和value。这个方法是vue.js实现双向绑定的核心(也是vue为什么只兼容到IE9的重要原因)。

     

    四、什么是原型链?

    首先说一下关于继承,继承分两种:接口继承和实现继承,在ES(<=5)中由于函数没有签名,无法实现接口继承,只支持实现继承,而且其实现继承主要是依靠原型链来实现的。

    原型链:ES将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型。简单回顾一下构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么,假如我们让原型对象等于另一个类型的实例,结果会怎么样呢?显然,此时的原型对象将包含一个指向另一个原型的指针(因为实例中包含一个[[Prototype]]属性,该属性指向原型对象),相应地,另一个原型中也包含一个指向构造函数的指针(constructor)。假如另一个原型又是另一个构造函数的实例,那么上述关系依然成立,如此层次递进,就构成了实例与原型的链条。这就是所谓原型链的基本概念。如下所示:

    在上面的代码中,我们没有使用SubType默认提供的原型,而是给它换了一个新原型;这个新原型就是SuperType的实例。于是,新原型不仅具有作为一个SuperType的实例所拥有的全部属性和方法。而且其内部还有一个指针,指向了SuperType的原型。最终结果就是:instance指向SubType的原型,SubType的原型又指向SuperType的原型。

    这个例子的实例以及构造函数和原型链的关系如图:

    参考《JS高级程序设计》 

     

     

    展开全文
  • 原型链构造函数

    2018-10-17 17:47:37
    原型链构造函数 js每一个对象都会指向一个原型对象,并能从原型对象继承属性。每个对象都能通过 proto 属性访问到本身原型对象。创建对象的方式不同,对象的原型也会不同。对象的原型层层指向就能构成原型链。 ...

    原型链和构造函数

    js每一个对象都会指向一个原型对象,并能从原型对象中继承属性。每个对象都能通过 proto 属性访问到本身原型对象。创建对象的方式不同,对象的原型也会不同。对象的原型层层指向就能构成原型链。

    原型和原型链

    js中最基本的对象是 Object.prototype 。js中所有的对象的原型链最后都会指向 Object.prototype 这个对象。对象字面量创建的对象的原型会直接指向 Object.prototype 。js中函数也是对象,函数的原型则不是直接指向 Object.prototype 而是直接指向 Function.prototype,Function.prototype 的原型再指向 Object.prototype(这就是一个原型链)。Number、Array这些类型也是先指向相应的原型,这个原型再指向js的标准对象(Object.prototype)。

    var obj ={      //对象字面量创建的对象
        x:1
    }
    console.log(obj.__proto__ === Object.prototype); //true 
    //普通对象原型(obj.__proto__)直接指向Object.prototype
    
    function con(){ //函数也是对象
    }
    console.log(con.__proto__ === Function.prototype); //true
    //任意函数原型(con.__proto__)指向Function.prototype
    
    console.log(Function.prototype.__proto__ === Object.prototype); //true
    //函数原型的原型(Function.prototype.__proto__)指向Object.prototype
    
    //所以有下面结论
    console.log(con.__proto__.__proto__ === obj.__proto__);//true
    //对象实例和函数的原型都指向最终的js标准对象Object.prototype
    

    数组、数字、字符串、布尔都有和函数一样的原型链。

    console.log(Array.prototype.__proto__ === Object.prototype)     //true
    console.log(String.prototype.__proto__ === Object.prototype)    //true
    console.log(Number.prototype.__proto__ === Object.prototype)    //true
    console.log(Boolean.prototype.__proto__ === Object.prototype)   //true
    

    Array、String、Number、Boolean和Object这些都是构造函数,new Object() 就能实例化一个对象。总结:实例化的对象的原型指向其构造函数的prototype。除了Object()构造函数(Object已经是最基本的对象类型)构造函数的原型都指向js基本对象Object.prototype。

    构造函数

    js创建对象的方法最常用的就是通过对象字面量创建,这样创建的对象原型指向Object.prototype。通过Object.create()方法来创建对象,可以指定新对象原型为该方法的第一个参数而不是指向Object.prototype。构造函数创建对象也是常用的方法。通过构造函数创建对象也能够将创建的对象的原型指向任意对象。

    使用Object.create()方法指定新对象的prototype。

    var obj = Object.create({
        x:1
    })
    console.log(obj)            //Object{}
    console.log(obj.x)          //1,这个值是继承下来的
    console.log(obj.__proto__)  //Object {x: 1}
    

    Object.create()方法参数必须是一个对象或null。当参数是对象时能将创建的对象的原型指向这个参数对象。所以就能从中继承属性。

    js基本类型的构造函数创建对象的方法。

    var arr = new Array();
    console.log(arr.constructor);//function Array()
    
    var obj = new Object();
    console.log(obj.constructor);//function Object()
    
    //字面量创建也一样
    var arr2 =[];
    console.log(arr2.constructor);//function Array()
    

    构造函数

    function Person(name){          //这里的Person就和Array、Number一样了,不过是我们自定义的类型。
        this.name = name;           //构造函数里的this代表新创建的对象
        this.seyHello = function(){
            console.log("Hi I am "+ this.name);
        }
    }
    var p = new Person("Jack");     //创建新对象
    p.seyHello();                   //Hi I am Jack
    console.log(p)                  //Person {name: "jack", seyHello: }
    //构造函数里向this上添加的属性就会再实例化的新对象里
    
    console.log(p.constructor === Person);//实例对象的构造函数
    
    console.log(p.__proto__ === Person.prototype);//true
    

    上面最后一行我们看到,实例对象的原型就是构造函数的prototype属性。所以实例化的对象会继承构造函数的prototype属性里的所有属性。

    继承

    由上面知到,我们可以在构造函数的prototype里添加属性,让由该构造函数实例化的对象都能继承prototype里的属性。

    function Person(name){
        this.name = name;
    }
    
    Person.prototype = {
        sayhi:function () {
            console.log("Hi I am " + this.name)
        }
    }
    
    var p = new Person("Jack");
    var p2 = new Person("Tom");
    p.sayhi();//Hi I am Jack
    p2.sayhi();//Hi Iam Tom
    console.log(p);//Person {name: "Jack"}
    console.log(p2);//Person {name: "Tom"}
    

    我们将每个对象都会有的相同的方法sayhi(),放到构造函数的prototype里了。这样实例化出来的每个对象都会有这个方法。在最后两行的执行结果里我们看到实例化的对象里其实看不到sayhai这个属性。这是因为在访问对象属性时会先在对象自己的属性里寻找,如果没有找到就继续在原型里寻找,以此类推,直到最后的Object.prototype。如果在实例化的对象里添加同名属性则会覆盖原型链中的属性,但不会修改原型链中的属性。

    p2.sayhi = function(){
        console.log("Hello I am "+this.name);
    }
    
    console.log(p);//Person {name: "Jack"}
    console.log(p2);//Person {name: "Tom",sayhi:}, p2里添加了一个同名方法
    p.sayhi();//Hi Iam Tom
    p2.sayhi();//Hello Iam Tom
    

    在p2里添加了一个同名方法p2将使用自己的方法,不再在原型链中寻找。而p没有自己的方法,只有使用原型链中的方法。上面的p和p2就是构建了原型链。以p为例,p.__proto__指向Person.prototype(即{sayhi:function(){}})。{sayhi:function(){}}指向Object.prototype。

    原型运用

    我们可以向constructor.prototype添加我们想给这个类型添加的方法。无论这个constructor是类似Array、Number这样的默认类型还是像上面的Person一样自定义的类型。

    给数组添加一个求所有元素和的方法。

    Array.prototype.getSum = function(){
        var sum =0;
        for(var i =0 ;i< this.length;i++){
            sum += this[i]
        }
        return sum;
    }
    
    var arr = new Array();
    arr = [1,2,3,4];
    console.log(arr.getSum());
    

    https://github.com/songshuangfei/front-end-note/blob/master//js/prototype.md#原型链和构造函数

    展开全文
  • 构造函数和原型和原型链 1.静态成员和实例成员 1.1静态成员 静态成员在构造函数本身上添加的成员,静态成员只能通过构造函数来访问 function Person(name,age){ this.name = name; this.age = age; } //sex就是静态...
  • 构造函数中有两大成员静态成员 对象.属性值来赋值和实例成员通过函数this.xxx=xxx来赋值; function People(name,age) { this.name = name; this.age = age; } People.sex = '男'; var p1 = new People('张三...
  • javascript完整原型链详细图解(构造函数,原型,实例化对象) 一、首先说一下什么构造函数构造函数:用来创建对象时初始化对象。特点:构造函数名一般为大写字母开头;与new运算符一起使用来实例化对象。 ...
  • 原型链什么原型链?新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一...
  • 1、什么原型? 任何对象实例都有一个原型,也叫原型对象,这个原型对象由...我们知道,每个构造函数都有一个原型对象,每个原型对象都有一个指向构造函数的指针,而实例又包涵一个指向原型对象的内部指针。 ..
  • JavaScript ,每个函数对象都有一个prototype 属性,这个属性指向函数的原型对象。使用原型对象的好处是所有对象实例共享它所包含的属性和方法。 什么原型链?【原型链解决的是什么问题?】 原型链解决的主要...
  • 指向另一个对象,注意这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有。 构造函数通过原型分配的函数是所有对象所共享的。 原型对象prototype是每个构造函数都拥有的
  • 介绍一下JavaScript 原型、原型链原型链什么特点? 构造函数原型 prototype ...当我们使用构造函数新建一个对象后,这个对象的内部将包含一个指针,这个指针指向构造函数的 prototype 属性对应的值
  • 箭头函数为什么不能作为构造函数?

    千次阅读 多人点赞 2020-04-04 22:47:03
    这是常见面试题,我就按照我的理解回答常见答案:写法更简洁,没有this指向,this来自上下文,不能作为构造函数,这时候面试官追问,为什么箭头函数不能作为构造函数? 我之前对于这个问题的理解是,构造函数需要...
  • 简单回顾一下构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么,假如我们让原型对象等于另一个类型的实例,结果会...
  • 想理解更深可参考:深入javascript之原型和原型链https://blog.csdn.net/yucihent/article/details/79424506 这篇文章有空需要更加深去看一下:详谈JavaScript...原型链最重要的作用就是继承,实例来继承上一级的属...
  • 要弄清楚原型链就要先弄清楚 function 类型,javascript没有类的概念,都是函数,所以它是一门函数式的编程语言。类有一个很重要的特性,就是它可以根据它的构造函数来创建以它为模板的对象。javascript,...
  • 一、首先说一下什么构造函数构造函数:用来创建对象时初始化对象。...原型构造函数在实例化对象的过程,系统自动创建出来与其相关联的一个空的对象。可以由构造函数.prototype来访问到。 举例:实例
  • prototype 隐式原型:__proto__js万物皆对象,方法(Function)是对象,方法的原型(Function.prototype)是对象,对象具有属性(__proto__)称为隐式原型,对象的隐式原型指向构造该对象的构造函数的显式原型。...
  • 一、原型JavaScript 常被描述为一种基于原型的语言——每个对象拥有一个原型对象当试图访问一个对象的属性时,它不仅仅该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型原型,依次...
  • 前言:用了这么久js,对于它的原型链一直有种模糊的不确切感,很不爽,隧解析之。 本文主要解决的问题有以下三个: (1)constructor和prototype以及实例之间啥关系? (2)prototype是啥,proto又是啥,他们之间啥...
  • 构造函数的prototype属性指向它的prototype对象,也就是原型对象,在原型对象有一个constructor属性,指向构造函数。但是我们使用构造函数时,一般会重写它的原型,会导致constructor指向出问题。 问题二 :...
  • 该属性是一个指针,指向一个对象,该对象称之为原型对象(后期我们可以使用这个原型对象帮助我们js实现继承)。 原型对象上默认有一个属性constructor,该属性也是一个指针,指向其相关联的构造函数。 通过调用...
  • 1、构造函数继承 function Person(name,age){ this.name = name; this.age = age; this.run = function(){ console.log('跑....'); } } function YPerson(name,age,color){ this.method = ...
  • 原型相关3.1 构造函数原型对象——prototype3.2 对象原型__proto__3.3 constructor构造函数3.4 三者之间的关系3.5 原型链3.5.1 原型链的查找机制4. 通过原型为数组扩展内置方法 1.构造函数 1.1 对象创建的三种方式 ...
  • 介绍了原型、原型链构造函数、继承、new的实例化过程

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 59,529
精华内容 23,811
关键字:

在原型链中什么指向构造函数?