久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長(zhǎng)資訊網(wǎng)
      最全最豐富的資訊網(wǎng)站

      爆肝整理JavaScript之面向?qū)ο螅偨Y(jié)分享)

      本篇文章給大家?guī)?lái)了關(guān)于JavaScript中面向?qū)ο蟮南嚓P(guān)知識(shí),其中包括面向?qū)ο蟆?gòu)造函數(shù)以及繼承的相關(guān)問(wèn)題,希望對(duì)大家有幫助。

      爆肝整理JavaScript之面向?qū)ο螅偨Y(jié)分享)

      1、面向?qū)ο?/strong>

      面向?qū)ο蟾N近我們的實(shí)際生活, 可以使用面向?qū)ο竺枋霈F(xiàn)實(shí)世界事物. 但是事物分為具體的事物和抽象的事物

      面向?qū)ο蟮乃季S特點(diǎn):

      1. 抽?。ǔ橄螅?duì)象共用的屬性和行為組織(封裝)成一個(gè)類(模板)
      2. 對(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)

      1. 在ES6中類沒有變量提升,所以必須先定義類,才能通過(guò)類實(shí)例化對(duì)象
      2. 類里面的共有屬性和方法一定要加 this使用
      3. 類里面的this指向:
        • constructor 里面的 this指向?qū)嵗龑?duì)象
        • 方法里面的this指向這個(gè)方法的調(diào)用者
      <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);

      注意:

      1. 構(gòu)造函數(shù)用于創(chuàng)建某一類對(duì)象,其首字母要大寫
      2. 構(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ì)做四件事

      1. 在內(nèi)存中創(chuàng)建一個(gè)新的空對(duì)象。
      2. 讓 this 指向這個(gè)新的對(duì)象。
      3. 執(zhí)行構(gòu)造函數(shù)里面的代碼,給這個(gè)新對(duì)象添加屬性和方法。
      4. 返回這個(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)題。

      爆肝整理JavaScript之面向?qū)ο螅偨Y(jié)分享)

      • 我們希望所有的對(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

      爆肝整理JavaScript之面向?qū)ο螅偨Y(jié)分享)

      • 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)系

      爆肝整理JavaScript之面向?qū)ο螅偨Y(jié)分享)

      2.7、原型鏈查找規(guī)則

      1. 當(dāng)訪問(wèn)一個(gè)對(duì)象的屬性(包括方法)時(shí),首先查找這個(gè)對(duì)象自身有沒有該屬性
      2. 如果沒有就查找它的原型(也就是_proto_指向的prototype原型對(duì)象)
      3. 如果還沒有就查找原型對(duì)象的原型(Object的原型對(duì)象)
      4. 依次類推一直找到Object為止(null)
      5. __ proto __對(duì)象原型的意義就在于為對(duì)象成員查找機(jī)制提供一個(gè)方向,或者說(shuō)一條路線。

      爆肝整理JavaScript之面向?qū)ο螅偨Y(jié)分享)

      <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ú)法繼承父類方法

      核心原理:

      1. 將子類所共享的方法提取出來(lái),讓子類的 prototype 原型對(duì)象 = new 父類()
      2. 本質(zhì): 子類原型對(duì)象等于是實(shí)例化父類,因?yàn)楦割悓?shí)例化之后另外開辟空間,就不會(huì)影響原來(lái)父類原型對(duì)象
      3. 將子類的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ì)

      1. class 本質(zhì)還是 function
      2. 類的所有方法都定義在類的 prototype屬性上
      3. 類創(chuàng)建的實(shí)例,里面也有_proto_指向類的prototype原型對(duì)象
      4. 所以 ES6 的類它的絕大部分功能,ES5都可以做到,新的class寫法只是讓對(duì)象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法而已。
      5. 所以 ES6 的類其實(shí)就是語(yǔ)法糖
      6. 語(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()

      1. Object.keys()用于獲取對(duì)象自身所有的屬性
      2. 效果類似for...in
      3. 返回一個(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ù)的定義方式

      1. 函數(shù)聲明方式 function 關(guān)鍵字(命名函數(shù))
      2. 函數(shù)表達(dá)式(匿名函數(shù))
      3. new Function()
      var fn = new Function('參數(shù)1','參數(shù)2',.....,'函數(shù)體');
      • Function 里面參數(shù)都必須是字符串格式

      • 第三種方式執(zhí)行效率低,也不方便書寫,因此較少使用

      • 所有函數(shù)都是 Function 的實(shí)例(對(duì)象)

      • 函數(shù)也屬于對(duì)象

      爆肝整理JavaScript之面向?qū)ο螅偨Y(jié)分享)

      <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)用方式

      1. 普通函數(shù)
      2. 對(duì)象的方法
      3. 構(gòu)造函數(shù)
      4. 綁定事件函數(shù)
      5. 定時(shí)器函數(shù)
      6. 立即執(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):

      • callapply會(huì)調(diào)用函數(shù),并且改變函數(shù)內(nèi)部的this指向
      • callapply傳遞的參數(shù)不一樣,call 傳遞參數(shù),apply 必須數(shù)組形式
      • bind不會(huì)調(diào)用函數(shù),可以改變函數(shù)內(nèi)部this指向

      主要應(yīng)用場(chǎng)景

      1. call經(jīng)常做繼承
      2. apply經(jīng)常跟數(shù)組有關(guān)系,比如借助于數(shù)學(xué)對(duì)線實(shí)現(xiàn)數(shù)組最大值與最小值
      3. bind不調(diào)用函數(shù),但是還想改變this指向,比如改變定時(shí)器內(nèi)部的this指向

      贊(0)
      分享到: 更多 (0)
      網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)