JavaScript基礎(chǔ)

核心知識(shí)點(diǎn)

• 對(duì)象
  • 4種創(chuàng)建對(duì)象的方式
  • 操作對(duì)象（取值，賦值）

今日學(xué)習(xí)目標(biāo)

• 能夠使用對(duì)象方式保存數(shù)據(jù)
• 能夠理解自定義構(gòu)造函數(shù)如何創(chuàng)建對(duì)象
• 能夠獲取對(duì)象中的值及給對(duì)象賦值

對(duì)象

思考： 如何通過(guò)js函數(shù)將人的信息輸出？

什么是對(duì)象？

?現(xiàn)實(shí)世界： 萬(wàn)事萬(wàn)物皆對(duì)象。?對(duì)象： 必須是一個(gè)具體的事物。 （手機(jī)，汽車(chē)不是對(duì)象，屬于一類(lèi)對(duì)象）◆ 對(duì)象是由 特征（名詞）【屬性】 和 行為（動(dòng)詞）【方法】?程序中的對(duì)象： 對(duì)現(xiàn)實(shí)對(duì)象的抽象? 總結(jié)： 1. 程序中的對(duì)象：? 對(duì)象必須有對(duì)應(yīng)的屬性【描述對(duì)象的特點(diǎn)，在程序中一般使用名詞描述】? 對(duì)象必須有行為動(dòng)作方法 【方法用來(lái)描述具體對(duì)象的行為動(dòng)作，一般方法使用動(dòng)詞】

對(duì)象字面量創(chuàng)建對(duì)象

? 通過(guò)字面量方式創(chuàng)建對(duì)象var 變量名 = { key: value, key: value, key: functon () {} };備注：1. 創(chuàng)建對(duì)象，必須要確定具體的事物2. 創(chuàng)建對(duì)象，必須要確定對(duì)象有哪些屬性【特征】或者方法【動(dòng)作，行為】3. 如果一次想要輸出多個(gè)對(duì)象，那么可以將每一個(gè)對(duì)象放到一個(gè)數(shù)組中。? 訪(fǎng)問(wèn)對(duì)象屬性 （對(duì)象.屬性 | 對(duì)象['屬性名']） ? 訪(fǎng)問(wèn)對(duì)象方法 （對(duì)象.方法名）注意：1、 如果通過(guò) 對(duì)象['屬性名']訪(fǎng)問(wèn)對(duì)象的屬性時(shí)候，必須保證使用字符串格式? 函數(shù)：獨(dú)立存在的函數(shù)? 方法： 屬于對(duì)象的函數(shù)（匿名函數(shù)）

課堂練習(xí)

1. 創(chuàng)建一個(gè)英雄對(duì)象? 姓名? 年齡? 職業(yè)? 武器裝備 (weapon)? 愛(ài)好? 技能 (移動(dòng), 攻擊(attack))

通過(guò)Object創(chuàng)建對(duì)象

? var 變量 = new Object();1. Object 是一個(gè)構(gòu)造函數(shù)2. 通過(guò)new調(diào)用構(gòu)造函數(shù)? 添加屬性：對(duì)象變量.屬性名 = 值;? 添加方法： 對(duì)象變量.方法名 = function () {}

工廠(chǎng)方式創(chuàng)建對(duì)象

1. 思考如何創(chuàng)建多個(gè)游戲?qū)ο?#xff1f;2. 例如： function create ( name, age, height ) { var Ob = new Object()Ob.name = name;Ob.age = age;Ob.height = height;Ob.eat = function () {}return Ob; }

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

? 使用帕斯卡命名法 （每個(gè)單詞首字母大寫(xiě)）? 例如： function CreateHero ( name, age, height ) {this.name = name;this.age = age;this.height = height;}? 課堂案例：1. 使用自定義構(gòu)造函數(shù)方式創(chuàng)建3個(gè)對(duì)象，并添加到數(shù)組中 【對(duì)象基本的屬性有： name， age, gender】

new 關(guān)鍵字執(zhí)行過(guò)程

1. 在內(nèi)存中創(chuàng)建一個(gè)空對(duì)象 2. this指向創(chuàng)建的對(duì)象 3. 執(zhí)行函數(shù) 4. 返回當(dāng)前對(duì)象注意：1. 在構(gòu)造函數(shù)中，默認(rèn)的返回值就是當(dāng)前創(chuàng)建的對(duì)象

this關(guān)鍵字

1. 普通函數(shù)中的this 指向Window 2. 在方法中的this 指向當(dāng)前方法所屬的對(duì)象 3. 在構(gòu)造函數(shù)的this 指向創(chuàng)建的對(duì)象 總結(jié)：構(gòu)造函數(shù)誰(shuí)調(diào)用函數(shù)，this就指向誰(shuí)

遍歷對(duì)象刪除對(duì)象屬性

? 通過(guò) for in 遍歷 對(duì)象的成員? 遍歷對(duì)象中的屬性? 遍歷對(duì)象中的值

對(duì)象案例

1. 通過(guò)構(gòu)造函數(shù)創(chuàng)建3個(gè)對(duì)象，并將3個(gè)對(duì)象放到數(shù)組中，最后再將數(shù)組中每一個(gè)對(duì)象的信息輸出。 備注：?對(duì)象的信息需要從用戶(hù)輸入中獲取

檢測(cè)對(duì)象的數(shù)據(jù)類(lèi)型

對(duì)象 instanceof 構(gòu)造函數(shù)

對(duì)象總結(jié)

1. 程序中的對(duì)象： 在程序中對(duì)具體事物的抽象2. 對(duì)象的基本的組成： 屬性【描述對(duì)象特征特點(diǎn)】 | 方法 【描述對(duì)象行為動(dòng)作功能】3. 創(chuàng)建對(duì)象方式：? 字面量方式var obj = {key ： 值,key ： function () {}}? 通過(guò)構(gòu)造函數(shù)var obj = new Object(); obj.自定義屬性名 = 值;obj.自定義方法名 = function () {}? 工廠(chǎng)模式創(chuàng)建對(duì)象（本質(zhì)就是對(duì)第二種方式的封裝，創(chuàng)建多個(gè)對(duì)象）function people (name) {var obj = new Object();obj.自定義屬性名 = name;return obj}var zs = people('zs');? 自定義構(gòu)造函數(shù)創(chuàng)建對(duì)象（確定對(duì)象的類(lèi)型）function People (name) {this.自定義屬性名 = name;}var zs = new People('zs');4. 對(duì)象的基本操作? 獲取對(duì)象的屬性或方法1. 對(duì)象.自定義屬性名 || 對(duì)象['屬性名']2. 對(duì)象.自定義方法名()5. 判斷對(duì)象的具體類(lèi)型對(duì)象名稱(chēng) instanceOf 構(gòu)造函數(shù)

其他擴(kuò)展部分

簡(jiǎn)單數(shù)據(jù)類(lèi)型在內(nèi)存中的存儲(chǔ)

? 簡(jiǎn)單數(shù)據(jù)類(lèi)型（值類(lèi)型） 存儲(chǔ)在內(nèi)存的 棧 上? Number String Boolean Null Undefined? 分析簡(jiǎn)單數(shù)據(jù)類(lèi)型在內(nèi)存中的存儲(chǔ)方式var n1 = 10;var n2 = n1;

復(fù)雜數(shù)據(jù)類(lèi)型在內(nèi)存中的存儲(chǔ)

? 復(fù)雜數(shù)據(jù)類(lèi)型（引用類(lèi)型） 存儲(chǔ)在內(nèi)存的 堆 上? Object | Array | 函數(shù)

簡(jiǎn)單數(shù)據(jù)類(lèi)型作為函數(shù)的參數(shù)在內(nèi)存存儲(chǔ)

? 分析案例代碼function fn ( a, b ) {a = a+1;b = b+1;console.log( a );console.log( b );}var x = 10；var y = 5;fn(x, y);console.log( x, y ); 思考：x ， y 的值是多少？

復(fù)雜數(shù)據(jù)類(lèi)型作為函數(shù)的參數(shù)在內(nèi)存存儲(chǔ)

? function Person ( name, age ) {this.name = name; this.age = age;this.sayHi = function () {console.log( "你好" );}}var p1 = new Peron( "張三", 18 );function getperson ( person ) {person.name = "李四";}getperson( p1 );console.log( p1.name ); 思考： p1 的name值是什么？

?

總結(jié)

以上是生活随笔為你收集整理的javaScript第六天（1）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。