Javascript 原型链
栏目: JavaScript · 发布时间: 6年前
内容简介:先来一张图看看几个名词的关系 构造函数、原型、实例原谅我的狂草字体,我手写比用电脑画快。
先来一张图看看几个名词的关系 构造函数、原型、实例
原谅我的狂草字体,我手写比用电脑画快。
今天我们只说原型链,所以接下来我就围绕着原型链的几个部分说起。
这个大家都很熟悉了,首字母大写的函数我们都可以作为构造函数,不是说小写的就不能new,也是可以的,暂时说成约定俗成吧!
// 构造函数
function Fn() {}
//原型对象
console.log(Fn.prototype)
//new
let fn = new Fn()
//实例
console.log(fn)
代码部分结束了,今天我们就用这4行代码描述一下上图也就是原型链的来龙去脉。
每个函数都有一个属性prototype,借用 **Function.prototype** 属性存储了 Function 的原型对象。
验证了我草图构造函数.prototype指向原型对象
完整的log看一下
实例.__proto__也指向原型对象
从log里也能看出来
实例原型的constructor指向构造函数
最后再说构造函数 new关键字生成实例
手绘图说完了,我们说正题 原型链,为什么再说原型链之前先画了一个草图,为了帮助预热理解。
每一个原型对象都有一个__proto__属性,这个是我们在代码中继承的关键,也是众多面试官所问的什么是原型链
上图可以看到,第一次__proto__找到了原型对象,第二次__proto__找到了Object实例对象,第三次null查找结束。
我们平时开发中用到了__proto__去查找链条中我们继承的方法和属性都在prototype(原型)上,所以不能在Fn.prototype = xxx操作,这样链条就会中断,只能在原型上扩展属性。
明天继续聊继承!
欢迎吐槽!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Responsive Web Design
Ethan Marcotte / Happy Cog / 2011-6 / USD 18.00
From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft be......一起来看看 《Responsive Web Design》 这本书的介绍吧!