原型是什么,原型链?instanceof的实现

文章详细解释了JavaScript中对象的原型机制,包括当尝试访问对象属性时如何沿着原型链查找,以及如何通过__proto__属性连接对象与其构造函数的原型。还介绍了instanceof运算符的工作原理,用于检测对象是否属于某个构造函数的实例,并提供了手动实现instanceof的示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 原型:

每个对象都有一个原型对象,当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会去该对象的原型,以及对象原型的原型,依次向上搜索,直到搜索到或者到达原型链的末尾

创建了一个类,然后实例化zhangsan,打印zhangsan.sayHi()方法,但是zhangsan没有这种方法,就往该对象的原型上搜索,即对Person类进行搜索,找到了这个方法,并执行

<script>
        class Person{
            constructor(name,age){
                this.name=name
                this.age=age
            }
            sayHi(){
                console.log("hi")
            }
        }
        const zhangsan=new Person()
        console.log(zhangsan.sayHi())  //输出hi
</script>

2. 原型链:

原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链

 

__proto__作为每个对象的桥梁,用来指向创建它的构造函数的原型对象的prototype,即每一个对象的__proto__都会指向它原型对象的prototype。

所以zhangsan.__proto__就会指向Person的prototype

console.log(zhangsan.__proto__===Person.prototype) //输出true

依次类推,由于Person是一个普通对象,而普通对象的构造函数都是Object

console.log(zhangsan.__proto__.__proto__===Object.prototype) //输出true

而Object就没有原型了,它的__proto__为空了,

console.log(Object.prototype.__proto__)  //输出为null

3. instanceof的实现

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上,即判断这个对象是否是之前那个构造函数生成的对象

由于zhangsan是一个对象,不是数组,即console.log(zhangsan instanceof Array)会返回false

console.log(zhangsan instanceof Object)   //输出true
console.log(zhangsan instanceof Array)    //输出false

实现原理

function myinstanceof(obj1,obj2){
            
            while(true){
                if(obj1.__proto__==null){
                    return false
                }
                if(obj1.__proto__==obj2.prototype){
                    return true
                }
                obj1.__proto__=obj1.__proto__.__proto__
               
            }
        }
        console.log(myinstanceof(zhangsan,Object)) //输出true
}

如果是myinstanceof(zhangsan,Array)则会输出false,因为zhangsan是一个对象,不是一个数组,obj1.__proto__一开始是person.prototype,然后是Object.prototype,都跟Array.prototype不相等,之后Object.prototype.__proto__就是null,返回false。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值