说明JS中原型和原型链是很重要的知识点,本文内容则是我对于它的理解。建议读本文时已经有了一点的JS基础。目录前言参考来源前置技术要求楔子起由null开天辟地前因后果函数对象、实例对象与原型对象constructor、__proto__与prototype原型与原型链区分原型对象与 ...
说明
JS中原型和原型链是很重要的知识点,本文内容则是我对于它的理解。建议读本文时已经有了一点的JS基础。
目录
- 前言
- 起由
- 前因后果
- 函数对象、实例对象与原型对象
- constructor、__proto__与prototype
- 原型与原型链
- 区分原型对象与原型链
- 原型链的作用
- 原型链的流程与示例
前言
参考来源
前人栽树,后台乘凉,本文参考了以下来源
- 汤姆大叔:强大的原型和原型链
- JS原型对象与原型链
- Js中Prototype、__proto__、Constructor、Object、Function关系介绍
- 关于JS中的constructor与prototype
- SF:JS中先有函数还是先有对象
前置技术要求
阅读本文前,建议先阅读以下文章
- JavaScript变量、值与对象
- JavaScript数据类型
楔子
学习是有瓶颈的,JS学习也同样,基本上JS的学习中,到了原型与原型链这一步,就会遇到瓶颈,只有真正理解它,才能跨过去,进入新的领域
曾经看过很多网上关于JS原型的介绍,基本上每完整的看完一篇,就会“噢,恍然大悟的样子”。然后仔细想想,发现自己并没有真正的理解。所以这里将自己对应原型的理解写下来,希望能帮助他人快速理解原型。
起由
简单的描述下,原型是什么,如何诞生的。
null开天辟地
"无,名天地之始;有,名万物之母" -引自 《道德经》
- (无)在JS中,本来也是什么都没有的,只有一个 null
- (道生一)然后出现了Object.prototype对象
- (一生二)然后基于Object.prototype产生出了Function.prototype对象
注意,JS中所有对象都不是函数构造出来的,对象是由"JavaScript运行时环境"以原型对象为模板,直接产生出来的,构造函数只是以新生的对象为this,做一些初始化操作。(-引自参考来源)
- (二生三)然后基于两个prototype,产生出了两个构造器Object和Function。这时候出现了函数对象的概念,实例对象,原型对象的概念
- Object,Function都属于函数对象
- new Object()、new Function()出来的是实例对象
所以,后面我们一般会认为实例对象是由函数对象构造出来的
- Object.prototype,Function.prototype是原型,原型对象的作用就是以它为模板产生其它对象,它也和普通实例对象一样,拥有constructor,__proto__属性
原型对象之所以要有constructor,__proto__属性,可以认为是在产生实例对象时,方便实例对象指向具体的构造函数以及完成一个原型链的作用。
参考 函数对象、实例对象用原型对象
参考 constructor、__proto__与prototype
- (三生万物)然后基于前面的Object,Object.prototype,Function,Function.prototype,产生出了其它各种对象
可以先简单的理解以上步骤为JS对象的诞生过程(排除基本型的值,因为它们并不属于对象-没有对象的这些特性)
当然,里面具体Object.prototype、Object、Function.prototype这些内置对象的产生过程是很复杂的,上述只是为了便于理解的一种简单粗暴的概念。
前因后果
函数对象、实例对象与原型对象
再开始理解原型之前我们得先明确一个概念:"函数对象","实例对象","原型对象"
- 原型对象是对象的原型。原型对象有constructor,__proto__属性
可以认为所有对象都是原型产生的(万物之母可以认为是Object.prototype)。
- 函数对象有 prototype,__proto__属性
如JS内置的Object,Function对象都是函数对象。其中prototype的值就就是它对应的原型对象
- 实例对象有 constructor,__proto__属性
如new Object(),new Function()出来的都是实例对象。其中constructor指向它的构造函数,__proto__指向产生它的原型
- 关系如图
constructor、__proto__与prototype
在我们有了上述概念后,再来分析JS中的constructor,__proto__与prototype
//Object,Function都是函数对象 var 实例对象 = new 函数对象(); //Person也是函数对象 function Person(name) { this.name = name; this.say = function() { console.log(this.name); } }; var one = new Person('test'); console.log(Person.prototype);//{constructor:Person函数,__proto__:Object.prototype} console.log(Person.prototype.constructor === Person);//true console.log(Person.prototype.__proto__ === Object.prototype);//true console.log(Person.prototype.__proto__ === Function.prototype);//false console.log(Person.__proto__.__proto__ === Object.prototype);//true console.log(Person.__proto__.constructor === Function);//true console.log(Person.__proto__.constructor.prototype === Object.__proto__);//true console.log(Person.__proto__.constructor.__proto__ === Object.__proto__);//true console.log(Object.__proto__ === Person.__proto__);//true console.log(Person.__proto__.constructor.prototype === Person.__proto__);//true,相当于自己构建了自己... console.log(one.prototype); //undefined console.log(one.constructor === Person); //true console.log(one.__proto__ === Person.prototype); //true console.log(Object.prototype.constructor);//Object函数:function Object() { [native code] } console.log(Function.prototype.__proto__ === Object.prototype);//true console.log(Function.prototype.constructor === Function);//true console.log(Object.__proto__);//Function.prototype console.log(Function.prototype);//Function.prototype console.log(Function.__proto__);//Function.prototype console.log(Object.prototype.__proto__);//undefined console.log(Function.prototype === Function.__proto__);//true console.log(Object.__proto__ === Function.__proto__);//true console.log(Object.__proto__ === Function.prototype);//true console.log(Function.prototype.constructor === Function);//true console.log(Function.__proto__.constructor === Function);//true console.log(Object.__proto__ === undefined);//false console.log(Object.prototype.__proto__ === undefined);//true,原型链的尽头为null var two = {}; console.log(two.constructor === Object);//true console.log(two.prototype);//undefined console.log(two.__proto__ === Object.prototype);//true
原标题:JavaScript筑基篇(三)
关键词:JavaScript
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。