成都創(chuàng)新互聯(lián)是一家專(zhuān)注于網(wǎng)站建設(shè)、網(wǎng)站制作與策劃設(shè)計(jì),朝陽(yáng)網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:朝陽(yáng)等地區(qū)。朝陽(yáng)做網(wǎng)站價(jià)格咨詢:18980820575

如何理解JavaScript中構(gòu)造函數(shù)，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

JavaScript學(xué)習(xí)筆記構(gòu)造函數(shù)，面向?qū)ο螅?/h3>

· 　　首先，我們要明確，面向?qū)ο蟛皇钦Z(yǔ)法，是一個(gè)思想，是一種 編程模式。

· 面向： 面（臉），向（朝著）

· 面向過(guò)程： 臉朝著過(guò)程 =》 關(guān)注著過(guò)程的編程模式

· 面向?qū)ο螅?臉朝著對(duì)象 =》 關(guān)注著對(duì)象的編程模式

· 實(shí)現(xiàn)一個(gè)效果

· 在面向過(guò)程的時(shí)候，我們要關(guān)注每一個(gè)元素，每一個(gè)元素之間的關(guān)系，順序，。。。

· 在面向過(guò)程的時(shí)候，我們要關(guān)注的就是找到一個(gè)對(duì)象來(lái)幫我做這個(gè)事情，我等待結(jié)果

· 例子 ： 我要吃面條

· 面向過(guò)程

· 用多少面粉

· 用多少水

· 怎么和面

· 怎么切面條

· 做開(kāi)水

· 煮面

· 吃面

· 面向?qū)ο?/p>

· 找到一個(gè)面館

· 叫一碗面

· 等著吃

· 面向?qū)ο缶褪菍?duì)面向過(guò)程的封裝

· 我們以前的編程思想是，每一個(gè)功能，都按照需求一步一步的逐步完成

· 我們以后的編程思想是，每一個(gè)功能，都先創(chuàng)造一個(gè) 面館，這個(gè) 面館 能幫我們作出一個(gè) 面（完成這個(gè)功能的對(duì)象），然后用 面館 創(chuàng)造出一個(gè) 面，我們只要等到結(jié)果就好了

創(chuàng)建對(duì)象的方式

· 因?yàn)槊嫦驅(qū)ο缶褪且粋€(gè)找到對(duì)象的過(guò)程

· 所以我們先要了解如何創(chuàng)建一個(gè)對(duì)象

調(diào)用系統(tǒng)內(nèi)置的構(gòu)造函數(shù)創(chuàng)建對(duì)象

· js 給我們內(nèi)置了一個(gè) Object 構(gòu)造函數(shù)

· 這個(gè)構(gòu)造函數(shù)就是用來(lái)創(chuàng)造對(duì)象的

· 當(dāng) 構(gòu)造函數(shù) 和 new 關(guān)鍵字連用的時(shí)候，就可以為我們創(chuàng)造出一個(gè)對(duì)象

· 因?yàn)?js 是一個(gè)動(dòng)態(tài)的語(yǔ)言，那么我們就可以動(dòng)態(tài)的向?qū)ο笾刑砑映蓡T了

// 就能得到一個(gè)空對(duì)象var o1 = new Object() // 正常操作對(duì)象o1.name = 'Jack'o1.age = 18o1.gender = '男'

字面量的方式創(chuàng)建一個(gè)對(duì)象

· 直接使用字面量的形式，也就是直接寫(xiě) {}

· 可以在寫(xiě)的時(shí)候就添加好成員，也可以動(dòng)態(tài)的添加

// 字面量方式創(chuàng)建對(duì)象var o1 = {

 name: 'Jack',

 age: 18,

 gender: '男'}// 再來(lái)一個(gè)var o2 = {}o2.name = 'Rose'o2.age = 20o2.gender = '女'

使用工廠函數(shù)的方式創(chuàng)建對(duì)象

· 先書(shū)寫(xiě)一個(gè)工廠函數(shù)

· 這個(gè)工廠函數(shù)里面可以創(chuàng)造出一個(gè)對(duì)象，并且給對(duì)象添加一些屬性，還能把對(duì)象返回

· 使用這個(gè)工廠函數(shù)創(chuàng)造對(duì)象

// 1. 先創(chuàng)建一個(gè)工廠函數(shù)function createObj() {

  // 手動(dòng)創(chuàng)建一個(gè)對(duì)象  var obj = new Object()

  // 手動(dòng)的向?qū)ο笾刑砑映蓡T  obj.name = 'Jack'

  obj.age = 18

  obj.gender = '男'

  // 手動(dòng)返回一個(gè)對(duì)象  return obj}

// 2. 使用這個(gè)工廠函數(shù)創(chuàng)建對(duì)象var o1 = createObj()var o2 = createObj()

使用自定義構(gòu)造函數(shù)創(chuàng)建對(duì)象

· 工廠函數(shù)需要經(jīng)歷三個(gè)步驟

· 手動(dòng)創(chuàng)建對(duì)象

· 手動(dòng)添加成員

· 手動(dòng)返回對(duì)象

· 構(gòu)造函數(shù)會(huì)比工廠函數(shù)簡(jiǎn)單一下

· 自動(dòng)創(chuàng)建對(duì)象

· 手動(dòng)添加成員

· 自動(dòng)返回對(duì)象

· 先書(shū)寫(xiě)一個(gè)構(gòu)造函數(shù)

· 在構(gòu)造函數(shù)內(nèi)向?qū)ο筇砑右恍┏蓡T

· 使用這個(gè)構(gòu)造函數(shù)創(chuàng)造一個(gè)對(duì)象（和 new 連用）

· 構(gòu)造函數(shù)可以創(chuàng)建對(duì)象，并且創(chuàng)建一個(gè)帶有屬性和方法的對(duì)象

· 面向?qū)ο缶褪且朕k法找到一個(gè)有屬性和方法的對(duì)象

· 面向?qū)ο缶褪俏覀冏约褐圃?nbsp;構(gòu)造函數(shù) 的過(guò)程

// 1. 先創(chuàng)造一個(gè)構(gòu)造函數(shù)function Person(name, gender) {

 this.age = 18

 this.name = name

 this.gender = gender}// 2. 使用構(gòu)造函數(shù)創(chuàng)建對(duì)象var p1 = new Person('Jack', 'man')var p2 = new Person('Rose', 'woman')

構(gòu)造函數(shù)詳解

· 我們了解了對(duì)象的創(chuàng)建方式

· 我們的面向?qū)ο缶褪且茨苤苯拥玫揭粋€(gè)對(duì)象

· 要么就弄出一個(gè)能創(chuàng)造對(duì)象的東西，我們自己創(chuàng)造對(duì)象

· 我們的構(gòu)造函數(shù)就能創(chuàng)造對(duì)象，所以接下來(lái)我們就詳細(xì)聊聊 構(gòu)造函數(shù)

構(gòu)造函數(shù)的基本使用

· 和普通函數(shù)一樣，只不過(guò) 調(diào)用的時(shí)候要和 new 連用，不然就是一個(gè)普通函數(shù)調(diào)用

function Person() {}var o1 = new Person()  // 能得到一個(gè)空對(duì)象var o2 = Person()      // 什么也得不到，這個(gè)就是普通函數(shù)調(diào)用

· 注意： 不寫(xiě) new 的時(shí)候就是普通函數(shù)調(diào)用，沒(méi)有創(chuàng)造對(duì)象的能力

· 首字母大寫(xiě)

function person() {}var o1 = new person() // 能得到一個(gè)對(duì)象function Person() {}var o2 = new Person() // 能得到一個(gè)對(duì)象

· 注意： 首字母不大寫(xiě)，只要和 new 連用，就有創(chuàng)造對(duì)象的能力

· 當(dāng)調(diào)用的時(shí)候如果不需要傳遞參數(shù)可以不寫(xiě) ()，建議都寫(xiě)上

function Person() {}var o1 = new Person()  // 能得到一個(gè)空對(duì)象var o2 = new Person // 能得到一個(gè)空對(duì)象

· 注意： 如果不需要傳遞參數(shù)，那么可以不寫(xiě) （），如果傳遞參數(shù)就必須寫(xiě)

· 構(gòu)造函數(shù)內(nèi)部的 this，由于和 new 連用的關(guān)系，是指向當(dāng)前實(shí)例對(duì)象的

function Person() {

 console.log(this)}var o1 = new Person()  // 本次調(diào)用的時(shí)候，this => o1var o2 = new Person()  // 本次調(diào)用的時(shí)候，this => o2

· 注意： 每次 new 的時(shí)候，函數(shù)內(nèi)部的 this 都是指向當(dāng)前這次的實(shí)例化對(duì)象

· 因?yàn)闃?gòu)造函數(shù)會(huì)自動(dòng)返回一個(gè)對(duì)象，所以構(gòu)造函數(shù)內(nèi)部不要寫(xiě) return

· 你如果 return 一個(gè)基本數(shù)據(jù)類(lèi)型，那么寫(xiě)了沒(méi)有意義

· 如果你 return 一個(gè)引用數(shù)據(jù)類(lèi)型，那么構(gòu)造函數(shù)本身的意義就沒(méi)有了

使用構(gòu)造函數(shù)創(chuàng)建一個(gè)對(duì)象

· 我們?cè)谑褂脴?gòu)造函數(shù)的時(shí)候，可以通過(guò)一些代碼和內(nèi)容來(lái)向當(dāng)前的對(duì)象中添加一些內(nèi)容

function Person() {

  this.name = 'Jack'

  this.age = 18}

var o1 = new Person()var o2 = new Person()

· 我們得到的兩個(gè)對(duì)象里面都有自己的成員 name 和 age

· 我們?cè)趯?xiě)構(gòu)造函數(shù)的時(shí)候，是不是也可以添加一些方法進(jìn)去呢？

function Person() {

  this.name = 'Jack'

  this.age = 18

  this.sayHi = function () {

    console.log('hello constructor')

  }}

var o1 = new Person()var o2 = new Person()

· 顯然是可以的，我們的到的兩個(gè)對(duì)象中都有 sayHi 這個(gè)函數(shù)

· 也都可以正常調(diào)用

· 但是這樣好不好呢？缺點(diǎn)在哪里？

function Person() {

  this.name = 'Jack'

  this.age = 18

  this.sayHi = function () {

    console.log('hello constructor')

  }}

// 第一次 new 的時(shí)候， Person 這個(gè)函數(shù)要執(zhí)行一遍// 執(zhí)行一遍就會(huì)創(chuàng)造一個(gè)新的函數(shù)，并且把函數(shù)地址賦值給 this.sayHivar o1 = new Person()

// 第二次 new 的時(shí)候， Person 這個(gè)函數(shù)要執(zhí)行一遍// 執(zhí)行一遍就會(huì)創(chuàng)造一個(gè)新的函數(shù)，并且把函數(shù)地址賦值給 this.sayHivar o2 = new Person()

· 這樣的話，那么我們兩個(gè)對(duì)象內(nèi)的 sayHi 函數(shù)就是一個(gè)代碼一摸一樣，功能一摸一樣

· 但是是兩個(gè)空間函數(shù)，占用兩個(gè)內(nèi)存空間

· 也就是說(shuō) o1.sayHi 是一個(gè)地址，o2.sayHi 是一個(gè)地址

· 所以我們執(zhí)行 console.log(o1 === o2.sayHi) 的到的結(jié)果是 false

· 缺點(diǎn)： 一摸一樣的函數(shù)出現(xiàn)了兩次，占用了兩個(gè)空間地址

· 怎么解決這個(gè)問(wèn)題呢？

· 就需要用到一個(gè)東西，叫做 原型

看完上述內(nèi)容，你們掌握如何理解JavaScript中構(gòu)造函數(shù)的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前文章：如何理解JavaScript中構(gòu)造函數(shù)-創(chuàng)新互聯(lián)
URL分享：http://vcdvsql.cn/article46/jgoeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、全網(wǎng)營(yíng)銷(xiāo)推廣、企業(yè)網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站改版、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)