javascript原型链之原型对象实例和构造函数三者之间的关系

与光同尘      2022-02-14     805

关键词:

【转】Javascript 原型链之原型对象、实例和构造函数三者之间的关系

 

前言:用了这么久js,对于它的原型链一直有种模糊的不确切感,很不爽,隧解析之。

本文主要解决的问题有以下三个:

(1)constructor 和 prototype 以及实例之间啥关系?

(2)prototype是啥,__proto__又是啥,他们之间啥关系?

(3)如果改变一个 constructor 的 prototype,他的实例会发生什么改变?

ok,下面一个一个解决。

 

(1)constructor 和 prototype 以及实例对象三者之间啥关系?

举例:

  如上,当我们创建一个函数,系统就会为这个函数自动分配一个prototype指针,指向它的原型对象。并且可以发现,这个原型对象包含两个部分(constructor 和 __proto__)其中constructor指向函数自身。(这里形成了一个小闭环)

  当我们将该函数作为模版创建实例(new方法)的时候,我们发现创建出的实例是一个与构造函数同名的object,这个object是独立的,他只包含了一个__proto__指针(实例没有prototype,强行访问则会输出undefined),这个指针指向上面提到的构造函数的prototype原型对象。

  这时候我们发现三者形成了一个大"闭环"。之所以加上引号,因为构造函数和实例之间无法直接访问,需要通过__proto__指针间接读取。

 

 这个"大闭环"画出来就是下面这个样子啦:

到此第一个问题已经解决。

 

(2)prototype是啥,__proto__又是啥,他们之间啥关系?

在上一个问题中,我们用到了实例对象的__proto__指针,实际上在JavaScript中大部分类型的值都拥有__proto__属性,例如:

 

 

 

 

当然object和function对象也有:

 

 不过也有不存在__proto___属性的类型,比如:

等等。

 

 然而。只有function对象才有prototype属性,其他任何类型的值都没有。即使是使用new方法从function构造出的实例对象也没有prototype属性。

 

(object类型的值的prototype输出undefined)

(我们改变了test的prototype的值,将其链接到一个函数名为test的函数,接着,函数类型的值的prototype输出了一个原型对象)

 

so,do you understand?

 

(3)如果改变一个 constructor 的 prototype,他的实例会发生什么改变?

 我们来做一个尝试:

 

我们可以发现,改变了prototype之后创建的实例指向了新的prototype对象,而之前的依然指向老的prototype对象。

下面是个应用这个方法拓展实例的小例子:

var shape = function () {
};
var p = {
    a: function () {
        console.log('aaa');
    }
};
shape.prototype = p;

var circle = new shape();

circle.a();

//输出'aaa'
 
 
 

javascript---原型

总结:•Js所有的函数都有一个prototype属性,这个属性引用了一个对象,即原型对象,也简称原型。这个函数包括构造函数和普通函数,我们讲的更多是构造函数的原型,但是也不能否定普通函数也有原型    构造函... 查看详情

javascript之原型

原型对象:任意一个函数都有prototype属性,这个属性是一个指针,指向该函数对象,prototype属性内部包含了所有实例共享的属性和方法。所有的原型对象都有一个constructor属性,它是一个指针,指向prototype属性所在的函数。原型... 查看详情

javascript_构造函数/原型/实例对象的关系

1.所有的实例对象都有隐式原型属性。2.每一个函数function都有一个prototype显示原型属性。3.对象的隐式原型的值为其对应构造函数的显式原型的值。4.函数的prototype属性:在定义函数时自动添加的,默认值是一个空Object对象。5.对象... 查看详情

javascript创建对象的默认方式:组合使用构造函数模式和原型模式

由于JavaScript中没有类,对象充当着一系列集合的模板,包含着属性和方法,而每个对象中也有一个原型对象,可以存放共享方法和属性。创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。构造函数模式用... 查看详情

javascript原型原型链神图

理解下面的神图,理解js原型、原型链1、每个对象都有自己的原型对象,每个对象都有一个prototype属性,该属性是一个指针,指向该对象的原型对象,原型对象中存放了一堆特定类型的实例所共享的属性和方法,原型对象也有自... 查看详情

重温javascript

继承   1.原型链继承  基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。... 查看详情

构造函数和实例对象和原型对象之间的关系

...例化对象构造函数中有一个属性叫prototype,是构造函数的原型对象、构造函数的原型对象(prototype)中有一个constructor构造器。这个构造器指向的就是自己所在的原型对象所在的构造函数。实例对象的原型对象(_proto_)指向的是... 查看详情

前端面试javascript—原型对象和构造函数有何关系?

在JavaScript中,每当定义一个函数数据类型(普通函数、类)时候,都会天生自带一个prototype属性,这个属性指向函数的原型对象。当函数经过new调用时,这个函数就成为了构造函数,返回一个全新的实... 查看详情

前端面试javascript—原型对象和构造函数有何关系?

在JavaScript中,每当定义一个函数数据类型(普通函数、类)时候,都会天生自带一个prototype属性,这个属性指向函数的原型对象。当函数经过new调用时,这个函数就成为了构造函数,返回一个全新的实... 查看详情

原型链、constructor和prototype图文详解

...并使用__proto__来访问Book3和Object的原型对象方法和属性。JavaScript中我们在定义构造函数的时候就会默认有一个prototype的属性。每个对象实例化后其实就是拷贝构造函数中除开prototype属性之外的所有方法和属性,其中会生成一个__p... 查看详情

构造函数和原型

...对象构造函数通过原型定义的函数是所有实例对象共享的JavaScript规定,每一个构造函数都有一个prototype属性,指向另一个对象,这个对象的所有方法和属性,都会被构造函数所拥有。我们可以把相同的方法,直接定义在prototype... 查看详情

javascript的几种继承

1.原型链继承:构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。确认原型和实例之间的关系用instanceof。原型链继承缺点:... 查看详情

javascript之面向对象学习六原型模式创建对象的问题,组合使用构造函数模式和原型模式创建对象

一、仔细分析前面的原型模式创建对象的方法,发现原型模式创建对象,也存在一些问题,如下:1、它省略了为构造函数传递初始化参数这个环节,结果所有实例在默认的情况下都将取得相同的属性值,这还不是最大的问题!2、最... 查看详情

javascript构造函数和原型(代码片段)

...7构造函数、实例、原型对象三者之间的关系 1.8原型链1.9JavaScript的成员查找机制(规则)1.10原型对象this指向1.11扩展内置对象更多JavaScript内容:1.构造函数和原型1.1概述在典型的OOP的语言中(如Java),都存在类的概... 查看详情

javascript构造函数+原型创建对象,原型链+借用构造函数模式继承父类练习

...端开发的,但常常使用的技术反而是JQuery比较多一点。在JavaScript的使用上相对而言少些。尤其是在创建对象使用原型链继承上面,在项目开发中很少用到。所以今天做个demo练习一下,以后忘记了也可以照搬一下。说明一下:1.De... 查看详情

js原型链和继承的理解

...向Object并且会切断之前原型对象的联系,破坏原型链。3.JavaScript主要通过原型链实现继承。原型链的构建是通过将一个类型的实例赋值给另一个构造函数的原型实现的例子:xxx实例.p 查看详情

前端总结之javascript篇(代码片段)

...。可以简单的理解成对象的爹。在Firefox和Chrome中,每个JavaScript对象中都包含?个 proto (?标准)的属性指向它爹(该对象的原型),可 obj. proto 进?访问。构造函数: 可以通过 new 来 新建?个对象 的... 查看详情

javascripte的原型链之基础讲解

一、函数对象与普通对象varo1={};varo2=newObject();varo3=newf1();functionf1(){};varf2=function(){};varf3=newFunction(‘str‘,‘console.log(str)‘);console.log(typeofObject);//functionconsole.log(typeofFunction);//func 查看详情