本篇文章給大家?guī)?lái)了關(guān)于JavaScript中面向?qū)ο蟮南嚓P(guān)知識(shí),其中包括面向?qū)ο蟆?gòu)造函數(shù)以及繼承的相關(guān)問(wèn)題,希望對(duì)大家有幫助。
1、面向?qū)ο?/strong>
面向?qū)ο蟾N近我們的實(shí)際生活, 可以使用面向?qū)ο竺枋霈F(xiàn)實(shí)世界事物. 但是事物分為具體的事物和抽象的事物
面向?qū)ο蟮乃季S特點(diǎn):
- 抽?。ǔ橄螅?duì)象共用的屬性和行為組織(封裝)成一個(gè)類(模板)
- 對(duì)類進(jìn)行實(shí)例化, 獲取類的對(duì)象
1.1、對(duì)象
在 JavaScript 中,對(duì)象是一組無(wú)序的相關(guān)屬性和方法的集合,所有的事物都是對(duì)象,例如字符串、數(shù)值、數(shù)組、函數(shù)等。
對(duì)象是由屬性和方法組成的
- 屬性:事物的特征,在對(duì)象中用屬性來(lái)表示
- 方法:事物的行為,在對(duì)象中用方法來(lái)表示
1.2、類
在 ES6 中新增加了類的概念,可以使用 class 關(guān)鍵字聲明一個(gè)類,之后以這個(gè)類來(lái)實(shí)例化對(duì)象。
- 類抽象了對(duì)象的公共部分,它泛指某一大類(class)
- 對(duì)象特指某一個(gè),通過(guò)類實(shí)例化一個(gè)具體的對(duì)象
1.2.1、創(chuàng)建類
class name { // class body}
- 創(chuàng)建實(shí)例
var XX = new name();
注意:類必須使用new
實(shí)例化對(duì)象
1.2.2、構(gòu)造函數(shù)
constructor()方法是類的構(gòu)造函數(shù)(默認(rèn)方法),用于傳遞參數(shù),返回實(shí)例對(duì)象,通過(guò) new 命令生成對(duì)象實(shí)例時(shí),自動(dòng)調(diào)用該方法。如果沒有顯示定義, 類內(nèi)部會(huì)自動(dòng)給我們創(chuàng)建一個(gè)constructor()
<script> // 1. 創(chuàng)建類 class 創(chuàng)建一個(gè) 明星類 class Star { // constructor 構(gòu)造器或者構(gòu)造函數(shù) constructor(uname, age) { this.uname = uname; this.age = age; } } // 2. 利用類創(chuàng)建對(duì)象 new var ldh = new Star('劉德華', 18); var zxy = new Star('張學(xué)友', 20); console.log(ldh); console.log(zxy);</script>
- 通過(guò) class 關(guān)鍵字創(chuàng)建類,類名我們還是習(xí)慣性定義首字母大寫
- 類里面有個(gè)
constructor
函數(shù),可以接收傳遞過(guò)來(lái)的參數(shù),同時(shí)返回實(shí)例對(duì)象 constructor
函數(shù)只要 new 生成實(shí)例時(shí),就會(huì)自動(dòng)調(diào)用這個(gè)函數(shù),如果我們不寫這個(gè)函數(shù),類也會(huì)自動(dòng)生成這個(gè)函數(shù)- 最后注意語(yǔ)法規(guī)范
- 創(chuàng)建類➡類名后面不要加小括號(hào)
- 生成實(shí)例➡類名后面加小括號(hào)
- 構(gòu)造函數(shù)不需要加 function 關(guān)鍵字
1.2.3、類中添加方法
語(yǔ)法:
class Person { constructor(name,age) { // constructor 稱為構(gòu)造器或者構(gòu)造函數(shù) this.name = name; this.age = age; } say() { console.log(this.name + '你好'); }} var ldh = new Person('劉德華', 18); ldh.say()
注意: 方法之間不能加逗號(hào)分隔,同時(shí)方法不需要添加 function 關(guān)鍵字。
<script> // 1. 創(chuàng)建類 class 創(chuàng)建一個(gè) 明星類 class Star { // 類的共有屬性放到 constructor 里面 constructor(uname, age) { this.uname = uname; this.age = age; } sing(song) { console.log(this.uname + song); } } // 2. 利用類創(chuàng)建對(duì)象 new var ldh = new Star('劉德華', 18); var zxy = new Star('張學(xué)友', 20); console.log(ldh); console.log(zxy); // (1) 我們類里面所有的函數(shù)不需要寫function // (2) 多個(gè)函數(shù)方法之間不需要添加逗號(hào)分隔 ldh.sing('冰雨'); zxy.sing('李香蘭');</script>
- 類的共有屬性放到
constructor
里面 - 類里面的函數(shù)都不需要寫
function
關(guān)鍵字
1.3 、類的繼承
現(xiàn)實(shí)中的繼承:子承父業(yè),比如我們都繼承了父親的姓。
程序中的繼承:子類可以繼承父類的一些屬性和方法。
語(yǔ)法:
// 父類class Father { }// 子類繼承父類class Son extends Father { }
看一個(gè)實(shí)例:
<script> // 父類有加法方法 class Father { constructor(x, y) { this.x = x; this.y = y; } sum() { console.log(this.x + this.y); } } // 子類繼承父類加法方法 同時(shí) 擴(kuò)展減法方法 class Son extends Father { constructor(x, y) { // 利用super 調(diào)用父類的構(gòu)造函數(shù) // super 必須在子類this之前調(diào)用 super(x, y); this.x = x; this.y = y; } subtract() { console.log(this.x - this.y); } } var son = new Son(5, 3); son.subtract(); son.sum();</script>
1.4、super關(guān)鍵字
super
關(guān)鍵字用于訪問(wèn)和調(diào)用對(duì)象父類上的函數(shù),可以調(diào)用父類的構(gòu)造函數(shù),也可以調(diào)用父類的普通函數(shù)
1.4.1、調(diào)用父類的構(gòu)造函數(shù)
語(yǔ)法:
// 父類class Person { constructor(surname){ this.surname = surname; }}// 子類繼承父類class Student entends Person { constructor(surname,firstname) { super(surname); //調(diào)用父類的 constructor(surname) this.firstname = firstname; //定義子類獨(dú)有的屬性 }}
注意:子類在構(gòu)造函數(shù)中使用super,必須放到this前面(必須先調(diào)用父類的構(gòu)造方法,在使用子類構(gòu)造方法)
案例:
// 父類class Father { constructor(surname){ this.surname = surname; } saySurname() { console.log('我的姓是' + this.surname); }}// 子類繼承父類class Son entends Father { constructor(surname,firstname) { super(surname); //調(diào)用父類的 constructor(surname) this.firstname = firstname; //定義子類獨(dú)有的屬性 } sayFirstname() { console.log('我的名字是:' + this.firstname); }}var damao = new Son('劉','德華');damao.saySurname();damao.sayFirstname();
1.4.2、調(diào)用父類的普通函數(shù)
語(yǔ)法:
class Father { say() { return '我是爸爸'; }}class Son extends Father { say(){ // super.say() super調(diào)用父類的方法 return super.say() + '的兒子'; }}var damao = new Son();console.log(damao.say());
-
多個(gè)方法之間不需要添加逗號(hào)分隔
-
繼承中屬性和方法的查找原則:就近原則,先看子類,再看父類
1.4、三個(gè)注意點(diǎn)
- 在ES6中類沒有變量提升,所以必須先定義類,才能通過(guò)類實(shí)例化對(duì)象
- 類里面的共有屬性和方法一定要加
this
使用 - 類里面的
this
指向:- constructor 里面的
this
指向?qū)嵗龑?duì)象 - 方法里面的
this
指向這個(gè)方法的調(diào)用者
- constructor 里面的
<body> <button>點(diǎn)擊</button> <script> var that; var _that; class Star { constructor(uname, age) { // constructor 里面的this 指向的是 創(chuàng)建的實(shí)例對(duì)象 that = this; this.uname = uname; this.age = age; // this.sing(); this.btn = document.querySelector('button'); this.btn.onclick = this.sing; } sing() { // 這個(gè)sing方法里面的this 指向的是 btn 這個(gè)按鈕,因?yàn)檫@個(gè)按鈕調(diào)用了這個(gè)函數(shù) console.log(that.uname); // that里面存儲(chǔ)的是constructor里面的this } dance() { // 這個(gè)dance里面的this 指向的是實(shí)例對(duì)象 ldh 因?yàn)閘dh 調(diào)用了這個(gè)函數(shù) _that = this; console.log(this); } } var ldh = new Star('劉德華'); console.log(that === ldh); ldh.dance(); console.log(_that === ldh); // 1. 在 ES6 中類沒有變量提升,所以必須先定義類,才能通過(guò)類實(shí)例化對(duì)象 // 2. 類里面的共有的屬性和方法一定要加this使用. </script></body>
2、構(gòu)造函數(shù)和原型
2.1、概述
在典型的 OOP 的語(yǔ)言中(如 Java),都存在類的概念,類就是對(duì)象的模板,對(duì)象就是類的實(shí)例,但在 ES6之前, JS 中并沒用引入類的概念。
ES6, 全稱 ECMAScript 6.0 ,2015.06 發(fā)版。但是目前瀏覽器的 JavaScript 是 ES5 版本,大多數(shù)高版本的瀏覽器也支持 ES6,不過(guò)只實(shí)現(xiàn)了 ES6 的部分特性和功能。
在 ES6之前 ,對(duì)象不是基于類創(chuàng)建的,而是用一種稱為構(gòu)建函數(shù)的特殊函數(shù)來(lái)定義對(duì)象和它們的特征。
- 創(chuàng)建對(duì)象有三種方式
- 對(duì)象字面量
- new Object()
- 自定義構(gòu)造函數(shù)
// 1. 利用 new Object() 創(chuàng)建對(duì)象var obj1 = new Object();// 2. 利用對(duì)象字面量創(chuàng)建對(duì)象var obj2 = {};// 3.利用構(gòu)造函數(shù)創(chuàng)建對(duì)象function Star(uname,age) { this.uname = uname; this.age = age; this.sing = function() { console.log('我會(huì)唱歌'); }}var ldh = new Star('劉德華',18);
注意:
- 構(gòu)造函數(shù)用于創(chuàng)建某一類對(duì)象,其首字母要大寫
- 構(gòu)造函數(shù)要和
new
一起使用才有意義
2.2、構(gòu)造函數(shù)
- 構(gòu)造函數(shù)是一種特殊的函數(shù),主要用來(lái)初始化對(duì)象(為對(duì)象成員變量賦初始值),它總與
new
一起使用 - 我們可以把對(duì)象中的一些公共的屬性和方法抽取出來(lái),然后封裝到這個(gè)函數(shù)里面
new 在執(zhí)行時(shí)會(huì)做四件事
- 在內(nèi)存中創(chuàng)建一個(gè)新的空對(duì)象。
- 讓 this 指向這個(gè)新的對(duì)象。
- 執(zhí)行構(gòu)造函數(shù)里面的代碼,給這個(gè)新對(duì)象添加屬性和方法。
- 返回這個(gè)新對(duì)象(所以構(gòu)造函數(shù)里面不需要 return )。
2.2.1、靜態(tài)成員和實(shí)例成員
JavaScript 的構(gòu)造函數(shù)中可以添加一些成員,可以在構(gòu)造函數(shù)本身上添加,也可以在構(gòu)造函數(shù)內(nèi)部的this
上添加。通過(guò)這兩種方式添加的成員,就分別稱為靜態(tài)成員和實(shí)例成員。
- 靜態(tài)成員:在構(gòu)造函數(shù)本身上添加的成員為靜態(tài)成員,只能由構(gòu)造函數(shù)本身來(lái)訪問(wèn)
- 實(shí)例成員:在構(gòu)造函數(shù)內(nèi)部創(chuàng)建的對(duì)象成員稱為實(shí)例成員,只能由實(shí)例化的對(duì)象來(lái)訪問(wèn)
// 構(gòu)造函數(shù)中的屬性和方法我們稱為成員,成員可以添加 function Star(uname,age) { this.uname = uname; this.age = age; this.sing = function() { console.log('我會(huì)唱歌'); } } var ldh = new Star('劉德華',18); // 實(shí)例成員就是構(gòu)造函數(shù)內(nèi)部通過(guò)this添加的成員 uname age sing 就是實(shí)例成員 // 實(shí)例成員只能通過(guò)實(shí)例化的對(duì)象來(lái)訪問(wèn) ldh.sing(); Star.uname; // undefined 不可以通過(guò)構(gòu)造函數(shù)來(lái)訪問(wèn)實(shí)例成員 // 靜態(tài)成員就是在構(gòu)造函數(shù)本身上添加的成員 sex 就是靜態(tài)成員 // 靜態(tài)成員只能通過(guò)構(gòu)造函數(shù)來(lái)訪問(wèn) Star.sex = '男'; Star.sex; ldh.sex; // undefined 不能通過(guò)對(duì)象來(lái)訪問(wèn)
2.2.2、構(gòu)造函數(shù)的問(wèn)題
構(gòu)造函數(shù)方法很好用,但是存在浪費(fèi)內(nèi)存的問(wèn)題。
- 我們希望所有的對(duì)象使用同一個(gè)函數(shù),這樣就比較節(jié)省內(nèi)存
2.3、構(gòu)造函數(shù)原型 prototype
- 構(gòu)造函數(shù)通過(guò)原型分配的函數(shù)是所有對(duì)象所共享的,這樣就解決了內(nèi)存浪費(fèi)問(wèn)題
- JavaScript 規(guī)定,每一個(gè)構(gòu)造函數(shù)都有一個(gè)
prototype
屬性,指向另一個(gè)對(duì)象,注意這個(gè)prototype
就是一個(gè)對(duì)象,這個(gè)對(duì)象的所有屬性和方法,都會(huì)被構(gòu)造函數(shù)所擁有 - 我們可以把那些不變的方法,直接定義在
prototype
對(duì)象上,這樣所有對(duì)象的實(shí)例就可以共享這些方法
<body> <script> // 1. 構(gòu)造函數(shù)的問(wèn)題. function Star(uname, age) { //公共屬性定義到構(gòu)造函數(shù)里面 this.uname = uname; this.age = age; // this.sing = function() { // console.log('我會(huì)唱歌'); // } } //公共的方法我們放到原型對(duì)象身上 Star.prototype.sing = function() { console.log('我會(huì)唱歌'); } var ldh = new Star('劉德華', 18); var zxy = new Star('張學(xué)友', 19); console.log(ldh.sing === zxy.sing); ldh.sing(); zxy.sing(); // 2. 一般情況下,我們的公共屬性定義到構(gòu)造函數(shù)里面, 公共的方法我們放到原型對(duì)象身上 </script></body>
- 一般情況下,我們的公共屬性定義到構(gòu)造函數(shù)里面, 公共的方法我們放到原型對(duì)象身上
問(wèn)答:原型是什么?
- 一個(gè)對(duì)象,我們也稱為
prototype
為原型對(duì)象
問(wèn)答:原型的作用是什么?
- 共享方法
2.4、對(duì)象原型 __ proto __
- 對(duì)象都會(huì)有一個(gè)屬性
_proto_
指向構(gòu)造函數(shù)的prototype
原型對(duì)象,之所以我們對(duì)象可以使用構(gòu)造函數(shù)prototype
原型對(duì)象的屬性和方法,就是因?yàn)閷?duì)象有_proto_
原型的存在。 _proto_
對(duì)象原型和原型對(duì)象prototype
是等價(jià)的_proto_
對(duì)象原型的意義就在于為對(duì)象的查找機(jī)制提供一個(gè)方向,或者說(shuō)一條路線,但是它是一個(gè)非標(biāo)準(zhǔn)屬性,因此實(shí)際開發(fā)中,不可以使用這個(gè)屬性,它只是內(nèi)部指向原型對(duì)象prototype
Star.prototype 和 ldh._proto_
指向相同
<body> <script> function Star(uname, age) { this.uname = uname; this.age = age; } Star.prototype.sing = function() { console.log('我會(huì)唱歌'); } var ldh = new Star('劉德華', 18); var zxy = new Star('張學(xué)友', 19); ldh.sing(); console.log(ldh); // 對(duì)象身上系統(tǒng)自己添加一個(gè) __proto__ 指向我們構(gòu)造函數(shù)的原型對(duì)象 prototype console.log(ldh.__proto__ === Star.prototype); // 方法的查找規(guī)則: 首先先看ldh 對(duì)象身上是否有 sing 方法,如果有就執(zhí)行這個(gè)對(duì)象上的sing // 如果沒有sing 這個(gè)方法,因?yàn)橛?__proto__ 的存在,就去構(gòu)造函數(shù)原型對(duì)象prototype身上去查找sing這個(gè)方法 </script></body>
2.5、constructor 構(gòu)造函數(shù)
-
對(duì)象原型(__ proto __)和構(gòu)造函數(shù)(prototype)原型對(duì)象里面都有一個(gè)屬性constructor屬性, constructor 我們稱為構(gòu)造函數(shù),因?yàn)樗富貥?gòu)造函數(shù)本身。
-
constructor
主要用于記錄該對(duì)象引用于哪個(gè)構(gòu)造函數(shù),它可以讓原型對(duì)象重新指向原來(lái)的構(gòu)造函數(shù) -
一般情況下,對(duì)象的方法都在構(gòu)造函數(shù)(prototype)的原型對(duì)象中設(shè)置
-
如果有多個(gè)對(duì)象的方法,我們可以給原型對(duì)象
prototype
采取對(duì)象形式賦值,但是這樣會(huì)覆蓋構(gòu)造函數(shù)原型對(duì)象原來(lái)的內(nèi)容,這樣修改后的原型對(duì)象constructor
就不再指向當(dāng)前構(gòu)造函數(shù)了。此時(shí),我們可以在修改后的原型對(duì)象中,添加一個(gè)constructor
指向原來(lái)的構(gòu)造函數(shù)
具體請(qǐng)看實(shí)例配合理解
<body> <script> function Star(uname, age) { this.uname = uname; this.age = age; } // 很多情況下,我們需要手動(dòng)的利用constructor 這個(gè)屬性指回 原來(lái)的構(gòu)造函數(shù) // Star.prototype.sing = function() { // console.log('我會(huì)唱歌'); // }; // Star.prototype.movie = function() { // console.log('我會(huì)演電影'); // } Star.prototype = { // 如果我們修改了原來(lái)的原型對(duì)象,給原型對(duì)象賦值的是一個(gè)對(duì)象,則必須手動(dòng)的利用constructor指回原來(lái)的構(gòu)造函數(shù) constructor: Star, sing: function() { console.log('我會(huì)唱歌'); }, movie: function() { console.log('我會(huì)演電影'); } } var ldh = new Star('劉德華', 18); var zxy = new Star('張學(xué)友', 19); </script></body>
2.6、構(gòu)造函數(shù)、實(shí)例、原型對(duì)象三者關(guān)系
2.7、原型鏈查找規(guī)則
- 當(dāng)訪問(wèn)一個(gè)對(duì)象的屬性(包括方法)時(shí),首先查找這個(gè)對(duì)象自身有沒有該屬性
- 如果沒有就查找它的原型(也就是
_proto_
指向的prototype原型對(duì)象
) - 如果還沒有就查找原型對(duì)象的原型(Object的原型對(duì)象)
- 依次類推一直找到Object為止(null)
- __ proto __對(duì)象原型的意義就在于為對(duì)象成員查找機(jī)制提供一個(gè)方向,或者說(shuō)一條路線。
<body> <script> function Star(uname, age) { this.uname = uname; this.age = age; } Star.prototype.sing = function() { console.log('我會(huì)唱歌'); } var ldh = new Star('劉德華', 18); // 1. 只要是對(duì)象就有__proto__ 原型, 指向原型對(duì)象 console.log(Star.prototype); console.log(Star.prototype.__proto__ === Object.prototype); // 2.我們Star原型對(duì)象里面的__proto__原型指向的是 Object.prototype console.log(Object.prototype.__proto__); // 3. 我們Object.prototype原型對(duì)象里面的__proto__原型 指向?yàn)?null </script></body>
2.8、原型對(duì)象this指向
- 構(gòu)造函數(shù)中的
this
指向我們的實(shí)例對(duì)象 - 原型對(duì)象里面放的是方法,這個(gè)方法里面的
this
指向的是這個(gè)方法的調(diào)用者,也就是這個(gè)實(shí)例對(duì)象
<body> <script> function Star(uname, age) { this.uname = uname; this.age = age; } var that; Star.prototype.sing = function() { console.log('我會(huì)唱歌'); that = this; } var ldh = new Star('劉德華', 18); // 1. 在構(gòu)造函數(shù)中,里面this指向的是對(duì)象實(shí)例 ldh ldh.sing(); console.log(that === ldh); // 2.原型對(duì)象函數(shù)里面的this 指向的是 實(shí)例對(duì)象 ldh </script></body>
2.9、擴(kuò)展內(nèi)置對(duì)象
- 可以通過(guò)原型對(duì)象,對(duì)原來(lái)的內(nèi)置對(duì)象進(jìn)行擴(kuò)展自定義的方法
- 比如給數(shù)組增加自定義求偶數(shù)和的功能
<body> <script> // 原型對(duì)象的應(yīng)用 擴(kuò)展內(nèi)置對(duì)象方法 Array.prototype.sum = function() { var sum = 0; for (var i = 0; i < this.length; i++) { sum += this[i]; } return sum; }; // Array.prototype = { // sum: function() { // var sum = 0; // for (var i = 0; i < this.length; i++) { // sum += this[i]; // } // return sum; // } // } var arr = [1, 2, 3]; console.log(arr.sum()); console.log(Array.prototype); var arr1 = new Array(11, 22, 33); console.log(arr1.sum()); </script></body>
注意:
- 數(shù)組和字符串內(nèi)置對(duì)象不能給原型對(duì)象覆蓋操作
Array.prototype = {}
,只能是Array.prototype.xxx = function(){}
的方式
3、繼承
ES6 之前并沒有給我們提供extends
繼承
- 我們可以通過(guò)構(gòu)造函數(shù)+原型對(duì)象模擬實(shí)現(xiàn)繼承,被稱為組合繼承
3.1、call()
調(diào)用這個(gè)函數(shù),并且修改函數(shù)運(yùn)行時(shí)的 this 指向
fun.call(thisArg,arg1,arg2,......)
thisArg
:當(dāng)前調(diào)用函數(shù) this 的指向?qū)ο?/li>arg1,arg2
: 傳遞的其他參數(shù)
示例
<body> <script> // call 方法 function fn(x, y) { console.log('我希望我的希望有希望'); console.log(this); // Object{...} console.log(x + y); // 3 } var o = { name: 'andy' }; // fn(); // 1. call() 可以調(diào)用函數(shù) // fn.call(); // 2. call() 可以改變這個(gè)函數(shù)的this指向 此時(shí)這個(gè)函數(shù)的this 就指向了o這個(gè)對(duì)象 fn.call(o, 1, 2); </script></body>
3.2、借用構(gòu)造函數(shù)繼承父類型屬性
- 核心原理: 通過(guò)
call()
把父類型的 this 指向子類型的 this,這樣就可以實(shí)現(xiàn)子類型繼承父類型的屬性
<body> <script> // 借用父構(gòu)造函數(shù)繼承屬性 // 1. 父構(gòu)造函數(shù) function Father(uname, age) { // this 指向父構(gòu)造函數(shù)的對(duì)象實(shí)例 this.uname = uname; this.age = age; } // 2 .子構(gòu)造函數(shù) function Son(uname, age, score) { // this 指向子構(gòu)造函數(shù)的對(duì)象實(shí)例 Father.call(this, uname, age); this.score = score; } var son = new Son('劉德華', 18, 100); console.log(son); </script></body>
3.3、借用原型對(duì)象繼承父類型方法
- 一般情況下,對(duì)象的方法都在構(gòu)造函數(shù)的原型對(duì)象中設(shè)置,通過(guò)構(gòu)造函數(shù)無(wú)法繼承父類方法
核心原理:
- 將子類所共享的方法提取出來(lái),讓子類的
prototype 原型對(duì)象 = new 父類()
- 本質(zhì): 子類原型對(duì)象等于是實(shí)例化父類,因?yàn)楦割悓?shí)例化之后另外開辟空間,就不會(huì)影響原來(lái)父類原型對(duì)象
- 將子類的
constructor
重新指向子類的構(gòu)造函數(shù)
<body> <script> // 借用父構(gòu)造函數(shù)繼承屬性 // 1. 父構(gòu)造函數(shù) function Father(uname, age) { // this 指向父構(gòu)造函數(shù)的對(duì)象實(shí)例 this.uname = uname; this.age = age; } Father.prototype.money = function() { console.log(100000); }; // 2 .子構(gòu)造函數(shù) function Son(uname, age, score) { // this 指向子構(gòu)造函數(shù)的對(duì)象實(shí)例 Father.call(this, uname, age); this.score = score; } // Son.prototype = Father.prototype; 這樣直接賦值會(huì)有問(wèn)題,如果修改了子原型對(duì)象,父原型對(duì)象也會(huì)跟著一起變化 Son.prototype = new Father(); // 如果利用對(duì)象的形式修改了原型對(duì)象,別忘了利用constructor 指回原來(lái)的構(gòu)造函數(shù) Son.prototype.constructor = Son; // 這個(gè)是子構(gòu)造函數(shù)專門的方法 Son.prototype.exam = function() { console.log('孩子要考試'); } var son = new Son('劉德華', 18, 100); console.log(son); console.log(Father.prototype); console.log(Son.prototype.constructor); </script></body>
3.3 類的本質(zhì)
- class 本質(zhì)還是 function
- 類的所有方法都定義在類的
prototype
屬性上 - 類創(chuàng)建的實(shí)例,里面也有
_proto_
指向類的prototype
原型對(duì)象 - 所以 ES6 的類它的絕大部分功能,ES5都可以做到,新的class寫法只是讓對(duì)象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法而已。
- 所以 ES6 的類其實(shí)就是語(yǔ)法糖
- 語(yǔ)法糖:語(yǔ)法糖就是一種便捷寫法,簡(jiǎn)單理解
4、ES5新增方法
ES5 給我們新增了一些方法,可以很方便的操作數(shù)組或者字符串
- 數(shù)組方法
- 字符串方法
- 對(duì)象方法
4.1、數(shù)組方法
- 迭代(遍歷)方法:foreach() ,map(),filter(),some() ,every() ;
4.1.1、forEach()
array.forEach(function(currentValue,index,arr))
- currentValue: 數(shù)組當(dāng)前項(xiàng)的值
- index: 數(shù)組當(dāng)前項(xiàng)的索引
- arr: 數(shù)組對(duì)象本身
<body> <script> // forEach 迭代(遍歷) 數(shù)組 var arr = [1, 2, 3]; var sum = 0; arr.forEach(function(value, index, array) { console.log('每個(gè)數(shù)組元素' + value); console.log('每個(gè)數(shù)組元素的索引號(hào)' + index); console.log('數(shù)組本身' + array); sum += value; }) console.log(sum); </script></body>
4.1.2、filter()篩選數(shù)組
array.filter(function(currentValue,index,arr))
filter()
方法創(chuàng)建一個(gè)新的數(shù)組,新數(shù)組中的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素,主要用于篩選數(shù)組- 注意它直接返回一個(gè)新數(shù)組
<body> <script> // filter 篩選數(shù)組 var arr = [12, 66, 4, 88, 3, 7]; var newArr = arr.filter(function(value, index) { // return value >= 20; return value % 2 === 0; }); console.log(newArr); </script></body>
4.1.3、some()
some()
方法用于檢測(cè)數(shù)組中的元素是否滿足指定條件(查找數(shù)組中是否有滿足條件的元素)- 注意它返回的是布爾值,如果查找到這個(gè)元素,就返回true,如果查找不到就返回false
- 如果找到第一個(gè)滿足條件的元素,則終止循環(huán),不再繼續(xù)查找
<body> <script> // some 查找數(shù)組中是否有滿足條件的元素 var arr1 = ['red', 'pink', 'blue']; var flag1 = arr1.some(function(value) { return value == 'pink'; }); console.log(flag1); // 1. filter 也是查找滿足條件的元素 返回的是一個(gè)數(shù)組 而且是把所有滿足條件的元素返回回來(lái) // 2. some 也是查找滿足條件的元素是否存在 返回的是一個(gè)布爾值 如果查找到第一個(gè)滿足條件的元素就終止循環(huán) </script></body>
4.2、字符串方法
trim()
方法會(huì)從一個(gè)字符串的兩端刪除空白字符trim()
方法并不影響原字符串本身,它返回的是一個(gè)新的字符串
<body> <input type="text"> <button>點(diǎn)擊</button> <p></p> <script> // trim 方法去除字符串兩側(cè)空格 var str = ' an dy '; console.log(str); var str1 = str.trim(); console.log(str1); var input = document.querySelector('input'); var btn = document.querySelector('button'); var p = document.querySelector('p'); btn.onclick = function() { var str = input.value.trim(); if (str === '') { alert('請(qǐng)輸入內(nèi)容'); } else { console.log(str); console.log(str.length); p.innerHTML = str; } } </script></body>
4.3、對(duì)象方法
4.3.1、Object.keys()
Object.keys()
用于獲取對(duì)象自身所有的屬性- 效果類似
for...in
- 返回一個(gè)由屬性名組成的數(shù)組
<body> <script> // 用于獲取對(duì)象自身所有的屬性 var obj = { id: 1, pname: '小米', price: 1999, num: 2000 }; var arr = Object.keys(obj); console.log(arr); arr.forEach(function(value) { console.log(value); // id // pname // price // num }) </script></body>
4.3.2、Object.defineProperty()
Object.defineProperty()
定義對(duì)象中新屬性或修改原有的屬性(了解)
Object.defineProperty(obj,prop,descriptor)
- obj : 目標(biāo)對(duì)象
- prop : 需定義或修改的屬性的名字
- descriptor : 目標(biāo)屬性所擁有的特性
<body> <script> // Object.defineProperty() 定義新屬性或修改原有的屬性 var obj = { id: 1, pname: '小米', price: 1999 }; // 1. 以前的對(duì)象添加和修改屬性的方式 // obj.num = 1000; // obj.price = 99; // console.log(obj); // 2. Object.defineProperty() 定義新屬性或修改原有的屬性 Object.defineProperty(obj, 'num', { value: 1000, enumerable: true }); console.log(obj); Object.defineProperty(obj, 'price', { value: 9.9 }); console.log(obj); Object.defineProperty(obj, 'id', { // 如果值為false 不允許修改這個(gè)屬性值 默認(rèn)值也是false writable: false, }); obj.id = 2; console.log(obj); Object.defineProperty(obj, 'address', { value: '中國(guó)山東藍(lán)翔技校xx單元', // 如果只為false 不允許修改這個(gè)屬性值 默認(rèn)值也是false writable: false, // enumerable 如果值為false 則不允許遍歷, 默認(rèn)的值是 false enumerable: false, // configurable 如果為false 則不允許刪除這個(gè)屬性 不允許在修改第三個(gè)參數(shù)里面的特性 默認(rèn)為false configurable: false }); console.log(obj); console.log(Object.keys(obj)); delete obj.address; console.log(obj); delete obj.pname; console.log(obj); Object.defineProperty(obj, 'address', { value: '中國(guó)山東藍(lán)翔技校xx單元', // 如果值為false 不允許修改這個(gè)屬性值 默認(rèn)值也是false writable: true, // enumerable 如果值為false 則不允許遍歷, 默認(rèn)的值是 false enumerable: true, // configurable 如果為false 則不允許刪除這個(gè)屬性 默認(rèn)為false configurable: true }); console.log(obj.address); </script></body>
- 第三個(gè)參數(shù) descriptor 說(shuō)明:以對(duì)象形式{ }書寫
- value:設(shè)置屬性的值,默認(rèn)為undefined
- writeable: 值是否可以重寫 true | false 默認(rèn)為false
- enumerable: 目標(biāo)屬性是否可以被枚舉 true | false 默認(rèn)為false
- configurable: 目標(biāo)屬性是否可以被刪除或是否可以再次修改特性 true | false 默認(rèn)為false
5、函數(shù)進(jìn)階
5.1、函數(shù)的定義方式
- 函數(shù)聲明方式 function 關(guān)鍵字(命名函數(shù))
- 函數(shù)表達(dá)式(匿名函數(shù))
- new Function()
var fn = new Function('參數(shù)1','參數(shù)2',.....,'函數(shù)體');
-
Function 里面參數(shù)都必須是字符串格式
-
第三種方式執(zhí)行效率低,也不方便書寫,因此較少使用
-
所有函數(shù)都是 Function 的實(shí)例(對(duì)象)
-
函數(shù)也屬于對(duì)象
<body> <script> // 函數(shù)的定義方式 // 1. 自定義函數(shù)(命名函數(shù)) function fn() {}; // 2. 函數(shù)表達(dá)式 (匿名函數(shù)) var fun = function() {}; // 3. 利用 new Function('參數(shù)1','參數(shù)2', '函數(shù)體'); // Function 里面參數(shù)都必須是字符串格式,執(zhí)行效率低,較少寫 var f = new Function('a', 'b', 'console.log(a + b)'); f(1, 2); // 4. 所有函數(shù)都是 Function 的實(shí)例(對(duì)象) console.dir(f); // 5. 函數(shù)也屬于對(duì)象 console.log(f instanceof Object); </script></body>
5.2、函數(shù)的調(diào)用方式
- 普通函數(shù)
- 對(duì)象的方法
- 構(gòu)造函數(shù)
- 綁定事件函數(shù)
- 定時(shí)器函數(shù)
- 立即執(zhí)行函數(shù)
<body> <script> // 函數(shù)的調(diào)用方式 // 1. 普通函數(shù) function fn() { console.log('人生的巔峰'); } // fn(); fn.call() // 2. 對(duì)象的方法 var o = { sayHi: function() { console.log('人生的巔峰'); } } o.sayHi(); // 3. 構(gòu)造函數(shù) function Star() {}; new Star(); // 4. 綁定事件函數(shù) // btn.onclick = function() {}; // 點(diǎn)擊了按鈕就可以調(diào)用這個(gè)函數(shù) // 5. 定時(shí)器函數(shù) // setInterval(function() {}, 1000); 這個(gè)函數(shù)是定時(shí)器自動(dòng)1秒鐘調(diào)用一次 // 6. 立即執(zhí)行函數(shù) (function() { console.log('人生的巔峰'); })(); // 立即執(zhí)行函數(shù)是自動(dòng)調(diào)用 </script></body>
5.3、函數(shù)內(nèi)this的指向
this
指向,是當(dāng)我們調(diào)用函數(shù)的時(shí)候確定的,調(diào)用方式的不同決定了this
的指向不同,一般我們指向我們的調(diào)用者
調(diào)用方式 | this指向 |
---|---|
普通函數(shù)調(diào)用 | window |
構(gòu)造函數(shù)調(diào)用 | 實(shí)例對(duì)象,原型對(duì)象里面的方法也指向?qū)嵗龑?duì)象 |
對(duì)象方法調(diào)用 | 該方法所屬對(duì)象 |
事件綁定方法 | 綁定事件對(duì)象 |
定時(shí)器函數(shù) | window |
立即執(zhí)行函數(shù) | window |
<body> <button>點(diǎn)擊</button> <script> // 函數(shù)的不同調(diào)用方式?jīng)Q定了this 的指向不同 // 1. 普通函數(shù) this 指向window function fn() { console.log('普通函數(shù)的this' + this); } window.fn(); // 2. 對(duì)象的方法 this指向的是對(duì)象 o var o = { sayHi: function() { console.log('對(duì)象方法的this:' + this); } } o.sayHi(); // 3. 構(gòu)造函數(shù) this 指向 ldh 這個(gè)實(shí)例對(duì)象 原型對(duì)象里面的this 指向的也是 ldh這個(gè)實(shí)例對(duì)象 function Star() {}; Star.prototype.sing = function() { } var ldh = new Star(); // 4. 綁定事件函數(shù) this 指向的是函數(shù)的調(diào)用者 btn這個(gè)按鈕對(duì)象 var btn = document.querySelector('button'); btn.onclick = function() { console.log('綁定時(shí)間函數(shù)的this:' + this); }; // 5. 定時(shí)器函數(shù) this 指向的也是window window.setTimeout(function() { console.log('定時(shí)器的this:' + this); }, 1000); // 6. 立即執(zhí)行函數(shù) this還是指向window (function() { console.log('立即執(zhí)行函數(shù)的this' + this); })(); </script></body>
5.4、改變函數(shù)內(nèi)部this指向
- JavaScript 為我們專門提供了一些函數(shù)方法來(lái)幫我們處理函數(shù)內(nèi)部 this 的指向問(wèn)題,常用的有
bind(),call(),apply()
三種方法
5.4.1、call() 方法
call()
方法調(diào)用一個(gè)對(duì)象,簡(jiǎn)單理解為調(diào)用函數(shù)的方式,但是它可以改變函數(shù)的this
指向fun.call(thisArg,arg1,arg2,.....)
thisArg
: 在 fun 函數(shù)運(yùn)行時(shí)指定的 this 值arg1,arg2
: 傳遞的其他參數(shù)- 返回值就是函數(shù)的返回值,因?yàn)樗褪钦{(diào)用函數(shù)
- 因此當(dāng)我們想改變 this 指向,同時(shí)想調(diào)用這個(gè)函數(shù)的時(shí)候,可以使用 call,比如繼承
<body> <script> // 改變函數(shù)內(nèi)this指向 js提供了三種方法 call() apply() bind() // 1. call() var o = { name: 'andy' } function fn(a, b) { console.log(this); console.log(a + b); }; fn.call(o, 1, 2); // call 第一個(gè)可以調(diào)用函數(shù) 第二個(gè)可以改變函數(shù)內(nèi)的this 指向 // call 的主要作用可以實(shí)現(xiàn)繼承 function Father(uname, age, sex) { this.uname = uname; this.age = age; this.sex = sex; } function Son(uname, age, sex) { Father.call(this, uname, age, sex); } var son = new Son('劉德華', 18, '男'); console.log(son); </script></body>
5.4.2、apply()方法
apply()
方法調(diào)用一個(gè)函數(shù),簡(jiǎn)單理解為調(diào)用函數(shù)的方式,但是它可以改變函數(shù)的this
指向fun.apply(thisArg,[argsArray])
- thisArg: 在 fun 函數(shù)運(yùn)行時(shí)指定的 this 值
- argsArray : 傳遞的值,必須包含在數(shù)組里面
- 返回值就是函數(shù)的返回值,因?yàn)樗褪钦{(diào)用函數(shù)
- 因此 apply 主要跟數(shù)組有關(guān)系,比如使用 Math.max() 求數(shù)組的最大值
<body> <script> // 改變函數(shù)內(nèi)this指向 js提供了三種方法 call() apply() bind() // 2. apply() 應(yīng)用 運(yùn)用的意思 var o = { name: 'andy' }; function fn(arr) { console.log(this); console.log(arr); // 'pink' }; fn.apply(o, ['pink']); // 1. 也是調(diào)用函數(shù) 第二個(gè)可以改變函數(shù)內(nèi)部的this指向 // 2. 但是他的參數(shù)必須是數(shù)組(偽數(shù)組) // 3. apply 的主要應(yīng)用 比如說(shuō)我們可以利用 apply 借助于數(shù)學(xué)內(nèi)置對(duì)象求數(shù)組最大值 // Math.max(); var arr = [1, 66, 3, 99, 4]; var arr1 = ['red', 'pink']; // var max = Math.max.apply(null, arr); var max = Math.max.apply(Math, arr); var min = Math.min.apply(Math, arr); console.log(max, min); </script></body>
5.4.3、bind()方法
bind()
方法不會(huì)調(diào)用函數(shù)。但是能改變函數(shù)內(nèi)部this
指向fun.bind(thisArg,arg1,arg2,....)
- 返回由指定的
this
值和初始化參數(shù)改造的原函數(shù)拷貝 - 因此當(dāng)我們只是想改變 this 指向,并且不想調(diào)用這個(gè)函數(shù)的時(shí)候,可以使用bind
<body> <button>點(diǎn)擊</button> <button>點(diǎn)擊</button> <button>點(diǎn)擊</button> <script> // 改變函數(shù)內(nèi)this指向 js提供了三種方法 call() apply() bind() // 3. bind() 綁定 捆綁的意思 var o = { name: 'andy' }; function fn(a, b) { console.log(this); console.log(a + b); }; var f = fn.bind(o, 1, 2); f(); // 1. 不會(huì)調(diào)用原來(lái)的函數(shù) 可以改變?cè)瓉?lái)函數(shù)內(nèi)部的this 指向 // 2. 返回的是原函數(shù)改變this之后產(chǎn)生的新函數(shù) // 3. 如果有的函數(shù)我們不需要立即調(diào)用,但是又想改變這個(gè)函數(shù)內(nèi)部的this指向此時(shí)用bind // 4. 我們有一個(gè)按鈕,當(dāng)我們點(diǎn)擊了之后,就禁用這個(gè)按鈕,3秒鐘之后開啟這個(gè)按鈕 // var btn1 = document.querySelector('button'); // btn1.onclick = function() { // this.disabled = true; // 這個(gè)this 指向的是 btn 這個(gè)按鈕 // // var that = this; // setTimeout(function() { // // that.disabled = false; // 定時(shí)器函數(shù)里面的this 指向的是window // this.disabled = false; // 此時(shí)定時(shí)器函數(shù)里面的this 指向的是btn // }.bind(this), 3000); // 這個(gè)this 指向的是btn 這個(gè)對(duì)象 // } var btns = document.querySelectorAll('button'); for (var i = 0; i < btns.length; i++) { btns[i].onclick = function() { this.disabled = true; setTimeout(function() { this.disabled = false; }.bind(this), 2000); } } </script></body>
5.4.4、總結(jié)
call apply bind 總結(jié):
相同點(diǎn):
- 都可以改變函數(shù)內(nèi)部的
this
指向
區(qū)別點(diǎn):
call
和apply
會(huì)調(diào)用函數(shù),并且改變函數(shù)內(nèi)部的this
指向call
和apply
傳遞的參數(shù)不一樣,call 傳遞參數(shù),apply 必須數(shù)組形式bind
不會(huì)調(diào)用函數(shù),可以改變函數(shù)內(nèi)部this
指向
主要應(yīng)用場(chǎng)景
call
經(jīng)常做繼承apply
經(jīng)常跟數(shù)組有關(guān)系,比如借助于數(shù)學(xué)對(duì)線實(shí)現(xiàn)數(shù)組最大值與最小值bind
不調(diào)用函數(shù),但是還想改變this指向,比如改變定時(shí)器內(nèi)部的this指向