乐趣区

关于javascript:2022年元旦我终于搞懂了原型和原型链

前言

如果你对原型和原型链的理解还停留在一个很浅的、不置可否的阶段,无妨来看看我的这篇文章,它应该能对你能有所帮忙,如果对你有那么一丢丢帮忙的话,欢送 点赞评论加转发。有问题和纳闷的话也能够在评论区留言,我会第一工夫回复大家,如果感觉我的文章哪里有知识点谬误的话,也恳请可能告知,把错的货色了解成对的,对咱们这个行业来说,是致命的。

之前尽管也常常刷原型方面的面试题,然而总是停留在一个很浅的、对知识点不置可否的阶段,而且常常遗记(这点置信大伙也是这样,哈哈哈),趁着元旦假期的最初一天(终于摸起了键盘),跟着 b 站一个视频过了下相干方面的常识,对此终于有了一个整体的了解。这里对其进行了一个整顿和演绎。

呜呜呜,本猿在这里立誓,将来一周,不论多忙,都须要回顾一遍本文,
否则
否则
掘金永远抽 bug 😣😣😣。

先晓得对应关系

prototype:原型
__proto__:原型链(链接点)

  1. 从属关系

    • prototype:函数的一个属性 -> 不要想的太简单,其实就是一个一般对象{}
    • __proto__:对象上的一个属性 -> 不要想的太简单,其实就是一个一般对象{}
  2. 对象的 __proto__ 保留着对象的构造函数的prototype
  3. 函数是非凡对象 所以 __proto__ 在函数上也是存在的,且是个function

大家常常疏忽遗记的一点:Object是个办法(构造函数),new Object是个实例对象!!!

console.log(Object) //typeof Object ==='function'
console.log(new Object) //typeof new Object ==='object'

constructor

constructor就是实例化对象的构造函数

//test.constructor -> 实例化 test 对象的构造函数 Test
console.log(test.constructor===Test) //true

// 这里集体了解为永无止境的本身调用本身,求解,没找到相干文章。console.log(test.constructor.prototype.constructor===Test) //true
console.log(test.constructor.prototype.constructor.prototype.constructor===Test) //true
//constructor 容许更改
function Test2() {this.a=123}
test.constructor=Test2
console.log(test)

原型

function Test(){}
let test=new Test() //new 完之后 test 是个实例对象了
console.log(test.__proto__===Test.prototype) // 依据下面的对应关系表 能够晓得后果为 true
//Test.prototype 也是一个对象,所以他必须也得有__proto__
//Test.prototype.__proto__曾经达到起点了, 起点是什么,起点就是 Object 构造函数,所以上面后果为 ture
console.log(Test.prototype.__proto__.constructor===Object)
// 且 依照下面对应关系中的规定和上条的后果,下条后果也是 ture
console.log(Test.prototype.__proto__===Object.prototype) // 
// 起点为 null
console.log(Object.prototype.__proto__) //null 

能不能形容一下原型链

对象的 __proto__ 保留着对象的构造函数的 prototypeprototype 又是个对象,所以也有本人的 __proto__,这样往返到起点Object.__proto__,这样就造成了一个以__proto__ 为链接点(为 key)值为构造方法的prototype 对象的一根链条, 即为原型链。

//__proto__
test{
      b:333,
      a:1,
      __proto__:Test.prototype={
          c:222,
          b:2,
          __proto__:Object.prototype={
              c:3,
              __proto__:null
          }
      }
 }

非凡的函数对象

重点:JS 中, 函数是一种非凡的对象!!!

记住文章结尾的对应关系表

// 函数是非凡对象 所以__proto__是存在的,且是个 function
console.log(Test.__proto__) //function
console.log(Test.prototype) //object

Test既然是个函数,那么底层必然也是 new Function 实现的,那么

// 对象的__proto__保留着对象的构造函数的 prototype
console.log(Test.__proto__===Function.prototype) //true 这里是不是和关系表对应上了,能失常了解

const obj={}
const obj2=new Object()

console.log(Object) //function
console.log(typeof Object) //'function'

Function既然是个构造函数,那么他是不是也应该有 __proto__prototype,是的,然而这里有一个非凡的点须要记住。

底层规定规定:Function.__proto__===Function.prototype是相等的, 且两者返回的都是一个 function,我的了解是 Function 本人结构了本人。

// 失常来说函数的 Test.prototype 应该是个 object,//Function.prototype 是个 function, 这也是一个非凡的点
typeof Test.prototype==='object' //true

console.log(Function.__proto__) // 一个 function
console.log(Function.prototype) // 一个 function
//Function 既然是函数对象_,那么他的_proto__就指向他的构造函数的 prototype,也就是
//Function.__proto__===Function.prototype,本人调本人,这样了解是不是也没故障。console.log(Function.__proto__===Function.prototype) //true

//Object 既然是个构造方法,那么底层也是 new Function
console.log(Object.__proto__===Function.prototype) //true

// 因为 Function.__proto__===Function.prototype 所以上面代码是成立的
(Object.__proto__===Function.__proto__)===true

hasOwnProperty 和 in

hasOwnProperty

hasOwnProperty用来判断是否是对象本身的属性(非原型链继承过去的)

let test={
    a:1,
    b:2
}
Object.prototype.c=3
console.log(test.hasOwnProperty('a')) //true
console.log(test.hasOwnProperty('b')) //true
console.log(test.hasOwnProperty('c')) //false

in

in用来查看对象是是否蕴含某个属性(蕴含原型链上的属性)

console.log('a' in test) //true
console.log('b' in test) //true
console.log('c' in test) //true
console.log('toString' in test) //true
console.log('d' in test) //false

援用

疾速搞懂『原型、原型链』
MDN
首发于 istao

退出移动版