原型和原型链

javaScript

函数数据类型:普通函数、类(内置类/自定义类)、箭头函数(都是function的实例)
对象数据类型:普通对象、数组对象、正则对象、日期对象、实例对象、函数对象(函数也是一个对象,也像普通对象一样,有自己的键值对)、类的prototype也是对象(都是Object的实例)

  • 每一个函数(除ES6箭头函数外)都有一个内置的属性prototype(原型属性),属性值是一个对象,在这个对象中会存储当前类的公共属性和方法
  • prototype的堆内存中,如果是浏览器为其默认开辟的堆内存,会存在一个内置属性:constructor构造函数,属性值就是当前类本身的值
  • 每一个对象都有内置属性具备:_proto_(原型链属性),属性值是当前实例所对应类的原型prototype

原型链查找机制

调用当前实例对象的某个属性(成员访问),先看自己私有属性中是否存在,存在调用的就是自己私有的;不存在,则默认按照_proto_找所属类prototype上的公有属性和方法;如果还没有,在基于prototype上的_proto_继续向上级查找,知道找到Object.prototype为止

function Fn(){
    this.x = 100
    this.y = 200
    this.getX = function(){
        console.log(this.x)
    }
}
Fn.prototype.getX = function(){
    console.log(this.x)
}
Fn.prototype.getY = function(){
    console.log(this.y)
}
let f1 = new Fn()
let f2 = new Fn()
console.log(f1.getY === f2.getX)  //=> false
console.log(f1.getY === f2.getY)  //=> true
console.log(f1.__proto__.getY === fn.prototype.getY) //=> true
console.log(f1.__proto__.getX === f2.getX)  //=> false
console.log(f1.getX === Fn.prototype.getX)  //=> false
console.log(f1.constructor) //=> Fn
console.log(Fn.prototypr.__proto__.constructor) //=> Object
f1.getX() //=> 100
f1.__proto__.getX() //=> undefined
f2.getY() //=> 200
Fn.prototype.getY() //=> undefined

解析1 dyc 解析2 dyc

Last Updated: 2021-04-26 14:38:08