原型链、instanceof检测类型的实现原理

访问某对象的属性时,会先在自身查找有没有这个属性,如果没有,就会沿着proto这条链向上查找,直至找到Object.prototype身上,找到就返回;没有找到,就返回undefined。

function Fun1(age){
      this.age = age
}

function Fun2(num){
      this.num = num
}
Object.prototype.name = 'yy'
let fun1 = new Fun1('18')
let fun2 = new Fun2(20)
console.log(fun1.age)
console.log(fun2.name)

所有函数的proto都相等?
相等。因为每个函数都可以由Function创建得到,比如

let fun1 = new Function()
let fun2 = new Function()
let fun3 = new Function()
console.log(fun1.__proto__ === fun2.__proto__)//true
console.log(fun2.__proto__ === fun3.__proto__)//true
console.log(fun1.__proto__ === Function.prototype)//true

每个函数都是Function的实例对象,他们的proto属性都共同指向的是同一个Function.prototype属性。

原型链属性问题
读取对象属性时,会自动在原型链中查找。
设置对象属性时,不会查找原型链,当前对象没有此属性,会直接添加此属性。
方法一般添加到函数的原型上,属性直接通过实例对象添加。

原型链练习题

function F (){}
Object.prototype.a = function(){
    console.log('a()')
}
Function.prototype.b = function(){
    console.log('b()')
}
  
var f = new F()
f.a()
// f.b()
F.a()
F.b()
console.log(f)

instanceof的原理
a instanceof b:判断a是不是它的父类型b或者祖先类型b的实例对象。
原理:如果b函数的prototype属性在a对象的原型链上,那么返回的结果就为true,否则返回false。

function Foo() {  }
let f1 = new Foo()
console.log(f1 instanceof Foo) // true
console.log(f1 instanceof Object) // true

console.log(Object instanceof Function) // true
console.log(Object instanceof Object) // true
console.log(Function instanceof Function) // true
console.log(Function instanceof Object) // true

手写instanceOf:
思路:遍历左边变量的原型链,如果和右边变量的原型相等,则查找成功,返回true。如果查找到原型链的尽头还没找到,则返回false。
参考:https://juejin.im/post/6844904191031246861#heading-17

function instanceOf(left,right){
  let leftVal = left.__proto__
  let rightVal = right.prototype
  while(leftVal!== null){
    if(leftVal === rightVal){
      return true
    }
    leftVal = leftVal.__proto__
  }
  return false
}

function Fun(name){
  this.name = name
}

let fun = new Fun()
console.log(instanceOf(fun,Fun))//true
console.log(instanceOf(10,Fun))//false
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。