你的位置:首页 > 软件开发 > Java > JavaScript筑基篇(三)

JavaScript筑基篇(三)

发布时间:2016-10-17 22:00:08
说明JS中原型和原型链是很重要的知识点,本文内容则是我对于它的理解。建议读本文时已经有了一点的JS基础。目录前言参考来源前置技术要求楔子起由null开天辟地前因后果函数对象、实例对象与原型对象constructor、__proto__与prototype原型与原型链区分原型对象与 ...

JavaScript筑基篇(三)

说明

JS中原型和原型链是很重要的知识点,本文内容则是我对于它的理解。建议读本文时已经有了一点的JS基础。

目录

  • 前言
    • 参考来源
    • 前置技术要求
    • 楔子
  • 起由
    • null开天辟地
  • 前因后果
    • 函数对象、实例对象与原型对象
    • 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__指向产生它的原型

  • 关系如图

    JavaScript筑基篇(三)

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 (#换成@)。