首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js对象和原型、原型链的关系

JS的原型、原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对这个概念一知半解,碰到问题靠...// 构造调用foo 返回一个新对象const newObj__proto__ = Object.getPrototypeOf(newObj) // 获取newObj的原型对象newObj__proto...__proto__ // 这种关系就是原型链可以用以下三句话来理解原型链:每个对象都拥有一个原型对象: newObj的原型是foo.prototype。...一个对象是否在另一个对象的原型链上如果一个对象存在另一个对象的原型链上,我们可以说:它们是继承关系。...原型对象改变,原型链下游获取的值也会改变上面那个例子中的foo1.test的值是什么?

1.5K20

说说JS中的原型对象和原型链

理解原型对象(有些文章简称为原型)和原型链,是理解JS的重要一环。下面是笔者对JS中原型的理解, 函数对象 俗话说,JS中万物皆对象。函数也是一个对象,只不过函数是在特定环境中执行代码的对象。...千言万语不如一幅图: 原型链 由上节我们可以知道,原型对象上的属性和方法被所有实例所共享的。...如果原型对象和实例上具有同名的属性或方法,则搜索时取最近的。 如上述的原型链的搜索机制,你通过阅读本文知道xiaoming.__proto__是Person.prototype,但xiaoming....不说话看图: 由此,可得到下面的关系图: 思考 原型链中的关系图其实还缺少一环,就是内置函数Function。...Function比较特殊,有兴趣的可以去研究下Function与Object的关系。 本文是笔者对原型对象和原型链的理解,如有错误或不足的地方,欢迎指正。

9210
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS中的面向对象、原型、原型链、继承总结大全

    当使用构造函数创建一个实例之后,会给实例添加内部属性[[prototype]],这个属性是一个指针,指向构造函数的prototype(原型)对象,由于是内部属性,无法通过脚本获取,但是在一些Chrome...继承 什么是原型链 ECMA中继承的主要方法就是通过原型链,主要是一个原型对象等于另一个类型的实例,由于实例内部含有一个指向构造函数的指针,这时候相当于重写了该原型对象,此时该原型对象就包含了一个指向另一个原型的指针...,假如另一个原型又是另一个类型的实例,这样就形成了原型链的概念,原型链最底层为Object.prototype....属性查找机制 js中实例属性的查找,是按照原型链进行查找,先找实例本身有没有这个属性,如果没有就去查找查找实例的原型对象,也就是[[prototype]]属性指向的原型对象,一直查到Object.prototype...方法继承,就是上文讲的到的原型链机制继承,另外可以给子构造函数添加自己的属性和方法。 这就是经典继承,避免了但是使用构造函数或者单独使用原型链的缺陷,成为js中最常用的继承方式。

    1.4K22

    js对象和原型、原型链的关系_2023-03-02

    JS的原型、原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对这个概念一知半解,碰到问题靠...foo() // 构造调用foo 返回一个新对象 const newObj__proto__ = Object.getPrototypeOf(newObj) // 获取newObj的原型对象 newObj...__proto__ // 这种关系就是原型链 可以用以下三句话来理解原型链: 每个对象都拥有一个原型对象: newObj的原型是foo.prototype。...一个对象是否在另一个对象的原型链上 如果一个对象存在另一个对象的原型链上,我们可以说:它们是继承关系。...原型对象改变,原型链下游获取的值也会改变 上面那个例子中的foo1.test的值是什么?

    57120

    原型链中的函数和对象

    这是我参与「掘金日新计划 · 6 月更文挑战」的第6天,点击查看活动详情 __ proto__ 最近在看高程4,原型链肯定是绕不过的,本瓜之前一直认为,只要记住这句话就可以了: 一个对象的隐式原型(__...proto__)等于构造这个对象的构造函数的显式原型(prototype) 确实,所有对象都符合这句真理,在控制台打印一试便知: const str = new String("123") str....__proto__ === Object.prototype // true Function 这个终极构造函数,通过查找显式原型的隐式原型,竟然等于 Object 的显式原型!...__proto__=== Object.prototype // true 所有构造函数的显式原型的隐式原型 等于 Object 的显式原型!! ---- 理解 为什么要这样设定呢??...这样原型链查找不是有两套逻辑吗?

    40010

    强大的原型和原型链

    这一次我们来对JavaScript中原型以及原型链做一个深入浅出的理解。...原型链概要 prototype属性是JavaScript为每个Function实例创建的一个对象。 具体的说:"它将通过new关键字创建的对象实例>链接回创建它们的" 。...其实有只看不见的手,在帮助着我们的代码完成任务 原型链的最后是Object.prototype 那么就让我们来看一下它的原型链查询吧。...由于prototype属性是一个对象,因此原型链或查询的最后一站是Object.prototype。 ?...如果传入参数,就遮盖继承的属性  创建继承链 我们自定义的构造函数实现了原型继承,设计原型继承的目的是要在传统的面向对象编程语言中找到模仿继承模式的继承链。继承只是一个对象可以访问另一个对象的属性。

    73980

    强大的原型和原型链

    这一次我们来对JavaScript中原型以及原型链做一个深入浅出的理解。...原型链概要 prototype属性是JavaScript为每个Function实例创建的一个对象。 具体的说:"它将通过new关键字创建的对象实例>链接回创建它们的" 。...其实有只看不见的手,在帮助着我们的代码完成任务 原型链的最后是Object.prototype 那么就让我们来看一下它的原型链查询吧。...由于prototype属性是一个对象,因此原型链或查询的最后一站是Object.prototype。 ?...如果传入参数,就遮盖继承的属性  创建继承链 我们自定义的构造函数实现了原型继承,设计原型继承的目的是要在传统的面向对象编程语言中找到模仿继承模式的继承链。继承只是一个对象可以访问另一个对象的属性。

    826100

    Javascript的原型与原型链

    一、原型与原型链的定义 原型:为其他对象提供共享属性的对象     注:当构造器创建一个对象,为了解决对象的属性引用,该对象会隐式引用构造器的"prototype"属性。...原型链:每个由构造器创建的对象,都有一个隐式引用(叫做对象的原型)链接到构造器的"prototype"属性。...__proto__); 输出结果如下: fn的原型:function () {} fn的原型链:function () {} fn的原型等于fn的原型链:true fn的原型的原型链:[object Object...的原型等于Function的原型链,在ECMAScript5.1的规范中是如此说明的:Function的prototype是一个函数对象,他内部的[[prototype]]属性值是标准内置的Object...用function关键字定义的类,做为Function类型的实例他本身有一个原型链(本身继承于Object),另外通过new创建的实例对象也有属于自己的原型链(prototype到__proto__的转换

    863101

    JS中的原型和原型链

    2、所有的引用类型都有一个’_ proto _'属性(也叫隐式原型,它是一个普通的对象)。 3、所有的函数都有一个’prototype’属性(这也叫显式原型,它也是一个普通的对象)。...---- 那么要点说完了,我们就根据这些要点来理解原型和原型链。 原型 我们先来看一个原型的例子。...这样每个对象都可以使用prototype属性里面的showName、showAge方法,并且节省了不少的资源。 ---- 原型链 理解了原型,那么原型链就更好理解了。...下面这段话可以帮助理解原型链 根据要点5,当试图得到一个对象的属性时,如果这个对象本身不存在这个属性,那么就会去它构造函数的’prototype’属性中去寻找。...这就是原型链,fn能够调用Object.prototype中的方法正是因为存在原型链的机制。

    1.8K21

    JS中的原型和原型链

    js在创建对象的时候,都有一个叫做proto的属性,用于指向它的函数对象的原型对象prototype。 prototype可以让所有的对象实例共享它包含的属性和方法。...原型链 每一个对象都可以有一个原型,这可原型还可以有它自己的原型,以此类推,就形成了原型链。...查找一个对象的属性或方法的时候,如果这个对象中没有这个属性或者方法,那就会在这个对象的原型对象中去找,以此类推,直到原型链结束。..._proto_ _proto_是原型链查询中实际用到的,指向构造函数的原型对象,他是对象独有的。对象._proto_ = 构造函数.prototype。 在js中,万物皆是对象,函数也是对象。...3、构造函数的prototype指向原型对象,原型对象的constructor指向构造函数。 使用 prototype最主要的用法就是将属性暴露成公用的。

    1.5K10

    js中的原型和原型链

    __proto__) // true 二、原型链 原型链:《JavaScript高级程序设计》中的描述是:每个构造函数都有一个原型对象,如果该原型是另一个类型的实例呢?...那就意味着这个原型本身有一个内部指针指向另一个原型,相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。这就是原型链的基本构想。...原型链中的查找机制:实例对象上找不到指定属性,就从该原型对象上找,如果还是找不到就到该原型对象上的原型上去找,。...逐层查找,直至查找到原型链的顶端 Object.prototype 它的 __proto 值为 null。...name属性的话查找该原型对象上的属性 // Person.prototype.name = 'lisi'; // 3.如果还没有就继续查找,直至查找到原型链的最顶端Object.Prototype Person.prototype

    1.1K00

    JavaScript——对象的原型

    原型链的实现 JavaScript里所有的对象都有一个名为__proto__的属性,这个属性里面存放的就是对象所参照的原型对象的引用。 ?...__proto__中的对象连在一起就构成了一个原型链,链的顶端就是Object.prototype对象,Object.prototype的__proto__属性值则是null __proto__属性被包含在...__proto__ = Person.prototype; tom = Person.call(tom,"Tom"); 属性的继承 当访问对象的属性时,JavaScript会通过遍历原型链进行查找,直到找到给定名称的属性为止...如果查找进行到原型链的顶部-Object.prototype仍然没有找到指定名称的属性时,就会返回undefined。...而设值对象属性则不会遍历原型链,而是直接将属性添加到该对象自身,并不影响到原型链中的对象。

    59310

    作用域链和原型链的区别_原型链和作用域链

    作用域链 在红宝书中对作用域链的描述有这么一段话:当代码在一个环境中执行时,会创建变量对象的一个作用域链。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。...作用域链的下一个变量对象来自包含环境,而在下一个变量对象则来自下一个包含环境。这样一直延续到全局执行环境;全局执行环境的变量对象始终都是作用域链中的最后一个对象。...对于这个例子中,compare()函数的执行函数而言,其作用域链中包含两个变量对象:本地活动对象和全局便朗对象。作用域链本质上是一个指向变量对象的指针列表,它只引用但不实际包含变量对象。...(即外部函数)的活动对象添加到它的作用域链中。...作用域链知识总结 当代码在一个环境中执行时,都会创建一个作用域链。 作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。整个作用域链的本质是一个指向变量对象的指针列表。

    45640

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

    2017-10-13 10:14:59 首先来说一下名词解释,首先说一下prototype,每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性...,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法。...,这个 __proto__ 又会有自己的 __proto__,于是就这样一直找下去,也就是我们平时所说的原型链的概念。...并且可以发现,这个原型对象包含两个部分(constructor 和 __proto__)其中constructor指向函数自身。...undefined),这个指针指向上面提到的构造函数的prototype原型对象。

    63910

    JavaScript中的显示原型和隐形原型(理解原型链)

    在js中万物皆对象,方法(Function)是对象,方法的原型(Function.prototype)是对象,对象具有属性(__proto__)称为隐式原型,对象的隐式原型指向构造该对象的构造函数的显式原型...方法(Function)是一个特殊的对象,除了和其他对象一样具有__proto__属性以外,它还有一个自己特有的原型属性(prototype),这个属性是一个指针,指向原型对象。...2.二者的关系 隐式原型指向创建这个对象的函数的prototype 首先我们来看如何创建一个对象 a.通过对象字面量的方式。...其中通过Object.creat(o)创建出来的对象他的隐式原型指向o。 通过对象字面量的方式创建的对象他的隐式原型指向Object.prototype。...构造函数function person本质上是由Function构造函数创建的,它是Function的一个实例。原型对象本质上是由Object构造函数创建的。

    3.2K30

    JavaScript中原型与原型链的简单理解

    讲原型和原型链,如果是讲定义,那很是晦涩难懂,今天我们就通俗易懂的说说原型与原型链。还需要借助阮老师的“Javascript继承机制的设计思想”。...3 原型链 从上面这张图,我们可以看到原型链的影子,由于JavaScript的一切都是对象(除undefined),又由于所有对象都有__proto__属性,__proto__又指向构造函数的prototype...,当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样 一直找下去,也就是我们平时所说的原型链的概念...原型链,说明是链式,而不是环,说明有终点,它的终点是null ? 4 总结 prototype是函数的原型对象,即prototype是一个对象,它会被对应的__proto__引用。...__proto__是所有对象都有的属性,通过__proto__的链式查找,可以形成原型链,原型链的终点是null。

    4081311

    原来你是这样的---原型和原型链

    把JS的原型和原型链重新梳理了一遍,然后动手绘制了一张流程图,原型和原型链的秘密就藏在这张图上。...接下来,我们 先贴上这份多重继承的代码; 绘制流程图,根据流程图剖析原型链的秘密; 写些测试代码验证;   先贴上代码,每个子构造函数会在继承父级的基础上,分别在构造函数里面和原型里面,自定义添加自己的属性和方法...__proto__ = 构造函数.prototype ;  __proto__是隐式原型,平常不建议直接使用,通常用Object.getPrototypeOf(对象)来获取实例对象的原型; 构造函数的...; 所有的对象或构造函数通过原型链,追本溯源,最后的老祖宗都是Object。...的实例对象,获取这两个实例对象的原型 var pro_function = Object.getPrototypeOf(Function), pro_object = Object.getPrototypeOf

    54210

    再谈构造函数、原型、原型链之间的关系

    前言 构造函数、原型、原型链作为ES5的内容,已经是老生常谈的问题了。首先说说为什么要再次拿起这个话题去说呢?...原型的作用是共享方法,一般情况下,我们的公共属性定义在构造函数里面,公共的方法放到原型对象上。...对象之间的继承关系,在JavaScript中是通过prototype对象指向父类对象,直到指向Object对象为止,这样就形成了一个原型指向的链条,专业术语称之为原型链[1]。...如果没有则去原型的原型中寻找,直到找到Object对象的原型,Object对象的原型没有原型,如果在Object原型中依然没有找到,则返回null。...显然:Object.create()是将对象继承到原型链上,可以通过原型链访问,new Object()不可以在原型链上访问。

    70920
    领券