JavaScript教程全套視頻合集：構(gòu)造函數(shù)內(nèi)容講解

JavaScript 是世界上最流行的腳本語言。 JavaScript 是屬于 web 的語言，它適用于 PC、筆記本電腦、平板電腦和移動電話。 JavaScript 被設(shè)計為向 HTML 頁面增加交互性。 許多 HTML 開發(fā)者都不是程序員，但是 JavaScript 卻擁有非常簡單的語法。幾乎每個人都有能力將小的 JavaScript 片段添加到網(wǎng)頁中。下面給大家分享下JavaScript教程全套視頻合集：構(gòu)造函數(shù)內(nèi)容講解。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了克拉瑪依區(qū)免費(fèi)建站歡迎大家使用！

面向?qū)ο?/p>

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

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

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

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

實現(xiàn)一個效果

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

在面向過程的時候，我們要關(guān)注的就是找到一個對象來幫我做這個事情，我等待結(jié)果

例子 ： 我要吃面條

面向過程

用多少面粉

用多少水

怎么和面

怎么切面條

做開水

煮面

吃面

面向?qū)ο?/p>

找到一個面館

叫一碗面

等著吃

面向?qū)ο缶褪菍γ嫦蜻^程的封裝

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

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

插個小消息，也方便想學(xué)習(xí)入行成為程序員的同學(xué)，在文章下方留言即可試聽課程外加領(lǐng)取千鋒HTML5、UI交互設(shè)計、PHP、Java+云數(shù)據(jù)、大數(shù)據(jù)開發(fā)、VR/AR/Unity游戲開發(fā)、Python人工智能、Linux云計算、全棧軟件測試、網(wǎng)絡(luò)安全等全部的視頻學(xué)習(xí)教程。

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

因為面向?qū)ο缶褪且粋€找到對象的過程

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

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

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

這個構(gòu)造函數(shù)就是用來創(chuàng)造對象的

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

因為 js 是一個動態(tài)的語言，那么我們就可以動態(tài)的向?qū)ο笾刑砑映蓡T了

// 就能得到一個空對象

var o1 = new Object()

// 正常操作對象

o1.name = 'Jack'

o1.age = 18

o1.gender = '男'

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

直接使用字面量的形式，也就是直接寫 {}

可以在寫的時候就添加好成員，也可以動態(tài)的添加

// 字面量方式創(chuàng)建對象

var o1 = {

name: 'Jack',

age: 18,

gender: '男'

}

// 再來一個

var o2 = {}

o2.name = 'Rose'

o2.age = 20

o2.gender = '女'

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

先書寫一個工廠函數(shù)

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

使用這個工廠函數(shù)創(chuàng)造對象

// 1. 先創(chuàng)建一個工廠函數(shù)

function createObj() {

// 手動創(chuàng)建一個對象

var obj = new Object()

// 手動的向?qū)ο笾刑砑映蓡T

obj.name = 'Jack'

obj.age = 18

obj.gender = '男'

// 手動返回一個對象

return obj

}

// 2. 使用這個工廠函數(shù)創(chuàng)建對象

var o1 = createObj()

var o2 = createObj()

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

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

手動創(chuàng)建對象

手動添加成員

手動返回對象

構(gòu)造函數(shù)會比工廠函數(shù)簡單一下

自動創(chuàng)建對象

手動添加成員

自動返回對象

先書寫一個構(gòu)造函數(shù)

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

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

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

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

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

// 1. 先創(chuàng)造一個構(gòu)造函數(shù)

function Person(name, gender) {

this.age = 18

this.name = name

this.gender = gender

}

// 2. 使用構(gòu)造函數(shù)創(chuàng)建對象

var p1 = new Person('Jack', 'man')

var p2 = new Person('Rose', 'woman')

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

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

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

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

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

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

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

function Person() {}

var o1 = new Person() // 能得到一個空對象

var o2 = Person() // 什么也得不到，這個就是普通函數(shù)調(diào)用

注意： 不寫 new 的時候就是普通函數(shù)調(diào)用，沒有創(chuàng)造對象的能力

首字母大寫

function person() {}

var o1 = new person() // 能得到一個對象

function Person() {}

var o2 = new Person() // 能得到一個對象

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

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

function Person() {}

var o1 = new Person() // 能得到一個空對象

var o2 = new Person // 能得到一個空對象

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

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

function Person() {

console.log(this)

}

var o1 = new Person() // 本次調(diào)用的時候，this => o1

var o2 = new Person() // 本次調(diào)用的時候，this => o2

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

因為構(gòu)造函數(shù)會自動返回一個對象，所以構(gòu)造函數(shù)內(nèi)部不要寫 return

你如果 return 一個基本數(shù)據(jù)類型，那么寫了沒有意義

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

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

我們在使用構(gòu)造函數(shù)的時候，可以通過一些代碼和內(nèi)容來向當(dāng)前的對象中添加一些內(nèi)容

function Person() {

this.name = 'Jack'

this.age = 18

}

var o1 = new Person()

var o2 = new Person()

我們得到的兩個對象里面都有自己的成員 name 和 age

我們在寫構(gòu)造函數(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()

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

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

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

function Person() {

this.name = 'Jack'

this.age = 18

this.sayHi = function () {

console.log('hello constructor')

}

}

// 第一次 new 的時候， Person 這個函數(shù)要執(zhí)行一遍

// 執(zhí)行一遍就會創(chuàng)造一個新的函數(shù)，并且把函數(shù)地址賦值給 this.sayHi

var o1 = new Person()

// 第二次 new 的時候， Person 這個函數(shù)要執(zhí)行一遍

// 執(zhí)行一遍就會創(chuàng)造一個新的函數(shù)，并且把函數(shù)地址賦值給 this.sayHi

var o2 = new Person()

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

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

也就是說 o1.sayHi 是一個地址，o2.sayHi 是一個地址

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

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

分享名稱：JavaScript教程全套視頻合集：構(gòu)造函數(shù)內(nèi)容講解
分享網(wǎng)址：http://muchs.cn/article46/gdeohg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、做網(wǎng)站、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計、企業(yè)網(wǎng)站制作、標(biāo)簽優(yōu)化

廣告

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