JavaScript-原型与原型链踩坑笔记

时间:2020-9-4 作者:admin

继上一次文章,相比较闭包和作用域,原型和原型链的理解没有那么的抽象晦涩,但其中依然有一些坑值得注意,这次就来记录一下自己的踩坑过程,适合初学者更好的理解原型和原型链。

一.原型

1.关于实例化

废话不多说,直接贴代码,也请读者思考一下输出结果。

function Car () {

}
var car = new Car()
Car.prototype.name = 'BMW'
console.log(car.prototype)  

其实这里输出的是undefined。prototype只有函数对象Car有,即使被car实例化了 ,也只是继承prototype里的属性。

2.关于原型属性的操作

原型的属性可以进行增删改查的操作,但是不同的修改方式可能一不小心让你掉进陷阱。

Person.prototype.name = '张三'
function Person () {

}
var person = new Person ()
Person.prototype.name = '李四'  // 修改prototype的属性 
console.log(person.name)   // 李四

到这里,都是正常的操作,理所应当,合情合理。那如果接下来这样修改呢?

Person.prototype = {   
   name: '李四'
}
console.log(person.name)    // ???

眉头一皱,发现事情并不简单,这里输出的其实还是李四。这是为什么呢?是不是哪里出了问题?但仔细想想也就能明白这里两者的根本区别,第二次是把原型重新赋值,这个对象在新的一个地址里 ,在这里改变name不影响protorype之前继承的地址里的name属性

二.原型链

原型的相互嵌套,一层层的链式连接叫做原型链。原型链最关键的两个属性prototype__proto__以及他们里面所自带的方法,你真的弄清楚了吗?

1.关于proto里的方法(包装类)

var num = 123
num.toString()

大家是否想过为什么Number类型会有一个toString()的方法的可以调用?这里涉及到包装类的知识。

var num = 123
num.toString() //   ----> new Number(num).toString() 

JavaScript-原型与原型链踩坑笔记

num当成Number对象进行实例化,Number.prototype.proto指向的就是Object.prototype。num自然而然找到Object.prototype里的toString()方法。现学现用!我们就可以进行方法重写

Object.prototype.toString = function() {
    return 'hhhh'
}
function Person() {
}
var person = new Person()
console.log(person.toString())  // 'hhhh'

2.对象的最终指向

网易有一道面试题,所有对象最终都会继承自Object.prototype吗?

var obj = Object.create(null)
var obj2 = Object.create(obj)

JavaScript-原型与原型链踩坑笔记

这里就不难发现obj2是个空的对象,obj2.proto里面什么都没有.所以当由null生成的对象最终是不会继承Object.prototype

三.结语

本文没有写过多的基础原理,而是针对有一定基础了解的人在面试、在工作中防坑指南。希望此文对大家有所借鉴哈,有问题的欢迎评论区指出和讨论。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。