js原型原型链个人理解

313 阅读3分钟

1.js中所有的对象都是由函数生成的

let obj={a:1,b:2}  等价于 let obj=new Object() obj.a=1 obj.2=2
Object就是生成对象的构造函数

let str='123' 字符串字面量写法生成基本字符串

当基本字符串需要调用一个字符串对象才有的方法或者查询值的时候
(基本字符串是没有这些方法的),JavaScript 会自动将基本字符串转化为字符串对象并且调用相应的方法或者执行查询。

在调用字符串的方法时 js内部会先把基本字符串转换为字符串对象
let strcopy=new String('123')
strcopy.字符串方法或属性
let str=strcopy
strcopy=null

2.js原型如何继承

目前个人是这么理解的

首先明确

1.对象都有一个__proto__属性 这是一个隐藏属性js不希望开发者使用 这个属性指向的是生成这个对象的构造函数的原型对象(prototype)

  let obj={a:1,b:2}
  对象的构造函数是Object 所以obj.__proto__===Object.prototype
  console.log(obj.__proto__===Object.prototype)//true
  
  let str='123'
  字符串的构造函数是String 所以str.__proto__===String.prototype
  console.log(str.__proto__===String.prototype)//true
  
  number 和其他基本类型与String同理不一一列举

2.函数具有两个属性(箭头函数除外) 一个prototype(函数的原型对象) 因为函数也是对象所以也有__proto__属性

函数是new Function生成的 所以函数的__proto__指向Function.prototype

prototype是原型对象所以也具有__proto__ 前面提到对象的构造函数是Object 所以prototype.proto

指向 Object.prototype 然后 Object.prototype.__proto__指向null

function test(){
   console.log('1222')
}
test.ad='123'
函数也可以定义属性 因为 函数是new Function()出来的对象 所以函数也具有__proto__
但prototype是函数独有的

函数的构造函数是Function 所以函数的构造函数原型是Function.prototype
console.log(test.__proto__===Function.prototype)//true

Function的__proto__指向自身的原型
cosnole.log(Function.__proto__===Function.prototype)



3.访问对象的属性时 会先从自身属性寻找 自身没有这个属性则沿着生成这个对象的原型找

原型上没找到 继续按着原型的构造函数的原型上找 一直找到Object.prototype它的构造函数原型为null返回

可以这么想象 函数的__proto__就先想函数是怎么来的 是new Function() 那函数的构造函数是

Function 构造函数的原型对象是 Function.prototype

Function.prototype是个对象 那么对象是怎么来的是 new Object() 那么Function.prototype构造函数就是 Object 所以Function.prototype.__proto__===Object.prototype 而 Object.prototype.__proto__===null 查找到此为止 没找到则返回undefined

对象的查找同上 先找到生成这个对象的构造函数的原型对象

 function myFun(){
    this.a='123'
 }
 let obj=new myFun()
 obj.__proto__===myFun.prototype
 myFun.prototype.__proto__===Object.prototype
 Object.prototype.__proto__===null

4.总结: 记住两点

1.所有对象都有__proto__属性 这个属性指向的是生成这个对象的函数的原型对象(prototype) 函数的__proto__ 指向Function.prototype

2.所有函数具有两个属性 一个prototype(函数的原型对象) 因为函数也是对象所以也有__proto__属性

原型图例如下