美文网首页
什么是JS原型链?

什么是JS原型链?

作者: 沐源山 | 来源:发表于2019-06-08 12:38 被阅读0次

我们知道JS有对象,举个栗子:

var obj = { name : 'obj' }

我们可以对obj进行一些操作,包括以下的操作:
-【增】
-【删】
-【改】
-【查】
下面我们来看看我们写的那行代码通过控制台打印出来是什么样子的

控制台返回结果
通过上面的图片我们发现obj已经有几个方法了(属性),但是我画红线的部分,我们并没有写,没有给赋值,那是valueOf怎么来的呢?

通过控制台打印出来的结果的是:

  1. obj 有一个属性 name (这是我们自己写的)
  2. obj 有一个属性叫做proto (这是一个对象)
    3.obj还有其他的想toString、constructor、还有我们的valueOf等属性
    我们的问题是我们没有给这些属性,那这些属性是从哪里来的呢?

答案:从这个proto身上来的

当我们【查找】 obj.valueOf的时候,浏览器会做下面的事情:

  1. 先从obj的本身上面来看有没有我们要的valueOf的属性。没有就会进行下一步,

  2. 看看obj.__proto__对象里面有没有valueOf属性,发现obj.__proto__有个valueOf的属性,于是就找到了,所以我们浏览器中看到的其实是在第二步中看到的,obj.__proto__.valueOf

3.如果obj.__proto__对象里面没有,那么浏览器会继续查看obj.__proto__.__proto__

4.如果obj.__proto__.__proto__里面还是没有的话,浏览器就会继续的往下寻找obj.__proto__.__proto__.__proto__

5.直到找到valueOf或者__proto__null的时候才会终止查找。

上面这些步骤我们是看不到的,但这就是浏览器【查找】的属性,也是【搜索】的过程。这个【搜索的过程】,是连着由__proto__组成的一个像链子一样的东西,浏览器跟随着这个链子走,我们就把这条链子就叫做【原型链】

共享原型链

现在我们有另一个对象var obj2 = { name: 'obj2' }通过控制台打印我们会发现和我们的第一个是一样的,也有那么多的属性,这是什么意思呢?
但当我们改写了obj2 的 某一个属性的时候,第一个也会改变!这样obj和obj2就是具有某些相同行为的对象。他们实质上是共享了同一个原型链。

差异化

如果我们想让obj和obj2做不一样的行为,该怎么做呢?
我们可以直接给他们不同的行为

var obj.toString = function(){
         return '新的 toString的方法'
}

文中若有不妥的地方,望读者加以斧正。共同学习,共同进步

相关文章

  • JS原型链

    1什么是JS原型链? 通过__proto__属性将对象与原型对象进行连接. 1.1 JS原型链的作用? 组成的一个...

  • JS的__proto__和prototype

    最近在回顾JS的原型和原型链的知识,熟悉JS的同学都知道JS的继承是靠原型链实现的,那跟原型链相关的属性__pro...

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • 原型与新版的类-class

    首先来理解原型原型 === 共用属性可以先看看方姐的几篇文章:什么是JS原型链JS 中 proto 和 proto...

  • web前端面试之js继承与原型链(码动未来)

    web前端面试之js继承与原型链(码动未来) 3.2.1、JavaScript原型,原型链 ? 有什么特点? 每个...

  • 2022前端高频面试题

    JS相关 1.原型和原型链是什么 原型和原型链都是来源于对象而服务于对象的概念js中引用类型都是对象,对象就是属性...

  • 前端资料

    ES6新数据类型 Symbol . js变量提升函数提升 js this js 原型及原型链理解 new做了什么 ...

  • 原型对象和原型链二者的关系

    开篇 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)...

  • 一个例子让你彻底明白原型对象和原型链

    开篇 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)...

  • 2018-10-29 关于js原型链的讨论

    起源:为什么使用原型链 使用原型链是为了实现继承,那js的继承为什么选择了原型链呢?我们来看看网络的解释 http...

网友评论

      本文标题:什么是JS原型链?

      本文链接:https://www.haomeiwen.com/subject/bfqbxctx.html