首頁 web前端 js教程 理解Javascript_11_constructor实现原理_javascript技巧

理解Javascript_11_constructor实现原理_javascript技巧

May 16, 2016 pm 06:18 PM
constructor 實現原理

constructor是什么

简单的理解,constructor指的就是对象的构造函数。请看如下示例:

复制代码 代码如下:

function Foo(){};
var foo = new Foo();
alert(foo.constructor);//Foo
alert(Foo.constructor);//Function
alert(Object.constructor);//Function
alert(Function.constructor);//Function

对于foo.constructor为Foo,我想应该很好理解,因为foo的构造函数为Foo。对于Foo、Object、Function的构造函数为Function,我想也没什么好争议的。(因为Foo,Object,Function都是函数对象,又因为所有的函数对象都是Function这个函数对象构造出来,所以它们的constructor为Function,详细请参考《js_函数对象》)

Prototype与Constructor的关系

复制代码 代码如下:

function Dog(){}
alert(Dog === Dog.prototype.constructor);//true

在 JavaScript 中,每个函数都有名为“prototype”的属性,用于引用原型对象。此原型对象又有名为“constructor”的属性,它反过来引用函数本身。这是一种循环引用,如图:
理解Javascript_11_constructor实现原理_javascript技巧
constructor属性来自何方
我们来看一下Function构造String的构造过程:
理解Javascript_11_constructor实现原理_javascript技巧
注:Function构造任何函数对象的过程都是一样的,所以说不管是String,Boolean,Number等内置对象,还是用户自定义对象,其构造过程都和上图一样。这里String只是一个代表而矣!
图中可以看出constructor是Function在创建函数对象时产生的,也正如'prototype与constructor的关系'中讲的那样,constructor是函数对象prototype链中的一个属性。即String=== String.prototype.constructor。

我还想用一段代码来证明一下,理论是正确的:
复制代码 代码如下:

function Person(){}
var p = new Person();
alert(p.constructor);//Person
alert(Person.prototype.constructor);//Person
alert(Person.prototype.hasOwnProperty('constructor'));//true
alert(Person.prototype.isPrototypeOf(p));//true
alert(Object.prototype.isPrototypeOf(p));//true
alert(Person.prototype == Object.prototype);//false

到现在,你会发现这和前面《原型链的实现原理》中的默认prototype指向Object.prototype有冲突,显然当时的理论不是很全面。

特别的Object
用心的读者可能会提出这样一问题,你这一套理论并不能适用于Object。因为以下的代码和你上面的理论是冲突的:
复制代码 代码如下:

alert(Object.prototype.hasOwnProperty('constructor'));//true
alert(Object.prototype.hasOwnProperty('isPrototypeOf'));//true,如果按上面的理论,这里应该返回false

真的是这样吗?不是!那我们来看一下特殊的Object是如何处理的:
理解Javascript_11_constructor实现原理_javascript技巧
你会发现,这图的原理和上面一张图的原理是一样的。这就能正确解释Object.prototype.hasOwnProperty('isPrototypeOf')为true!

constructor探究
复制代码 代码如下:

function Animal(){}
function Person(){}
var person = new Person();
alert(person.constructor); //Person

根据上一节的内容,你能正确的理解这段代码的结果吗?思考后,看一下其内存表示:
理解Javascript_11_constructor实现原理_javascript技巧
这张图明确有表明了Function构造Animal和Person的过程。同时也显示了实例person与Person的关系。

再深入一点,代码如下:
复制代码 代码如下:

function Animal(){}
function Person(){}
Person.prototype = new Animal();
var person = new Person();
alert(person.constructor); //Animal

这个时候,person的构造函数成了Animal,怎么解释?
理解Javascript_11_constructor实现原理_javascript技巧
注:图中的虚线表示Person默认的prototype指向(只作参考的作用)。但是我们将Person.prototype指向了new Animal。
此时,Person的prototype指向的是Animal的实例,所以person的constructor为Animal这个构造函数。

结论:constructor的原理非常简单,就是在对象的原型链上寻找constructor属性。

注:如果你无法正确理解本文内容,请回顾前面章节的内容。
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

深入了解Kafka訊息佇列的底層實作機制 深入了解Kafka訊息佇列的底層實作機制 Feb 01, 2024 am 08:15 AM

深入了解Kafka訊息佇列的底層實作機制

PHP核心的運作機制與實作原理詳解 PHP核心的運作機制與實作原理詳解 Nov 08, 2023 pm 01:15 PM

PHP核心的運作機制與實作原理詳解

PHP中的粒子群演算法實作原理 PHP中的粒子群演算法實作原理 Jul 10, 2023 pm 11:03 PM

PHP中的粒子群演算法實作原理

刨析swoole非同步任務處理功能的實作原理 刨析swoole非同步任務處理功能的實作原理 Aug 05, 2023 pm 04:15 PM

刨析swoole非同步任務處理功能的實作原理

深入分析Kafka訊息佇列的技術原理與適用場景 深入分析Kafka訊息佇列的技術原理與適用場景 Feb 01, 2024 am 08:34 AM

深入分析Kafka訊息佇列的技術原理與適用場景

掌握Tomcat中介軟體底層工作機制 掌握Tomcat中介軟體底層工作機制 Dec 28, 2023 pm 05:25 PM

掌握Tomcat中介軟體底層工作機制

優化與實作原理:Java中的快速排序 優化與實作原理:Java中的快速排序 Feb 20, 2024 pm 01:24 PM

優化與實作原理:Java中的快速排序

Java爬蟲技術的原理:詳細剖析網頁資料擷取過程 Java爬蟲技術的原理:詳細剖析網頁資料擷取過程 Jan 09, 2024 pm 02:46 PM

Java爬蟲技術的原理:詳細剖析網頁資料擷取過程

See all articles