| 函數(shù)的四種調(diào)用方式 | 您所在的位置：網(wǎng)站首頁 › 屬狗年份表對(duì)照表 › 函數(shù)的四種調(diào)用方式 |
|
?函數(shù)的四種調(diào)用方式
函數(shù)有下列調(diào)用模式 函數(shù)調(diào)用模式 方法調(diào)用模式 構(gòu)造器模式 上下文模式 1. 函數(shù)調(diào)用 模式要調(diào)用，就肯定要先定義，函數(shù)的定義方式： 聲明式: function fuc() {} 表達(dá)式式: var func = function() {}; Function: new Function( ‘參數(shù)’,…,’函數(shù)體’ );單獨(dú)獨(dú)立調(diào)用的,就是函數(shù)調(diào)用模式，即?函數(shù)名( 參數(shù) )，不能加任何其他的東西， 對(duì)象 o.fuc（） 就不是了。 在函數(shù)調(diào)用模式中，?this 表示全局對(duì)象 window 任何自調(diào)用函數(shù)都是函數(shù)模式。 2. 方法調(diào)用 模式 method所謂方法調(diào)用，就是用對(duì)象的方法調(diào)用。方法是什么，方法本身就是函數(shù)，但是，方法不是單獨(dú)獨(dú)立的，而是要通過一個(gè)對(duì)象引導(dǎo)來調(diào)用。 就是說方法對(duì)象一定要有宿主對(duì)象。 即?對(duì)象.方法（參數(shù)） this表示引導(dǎo)方法的對(duì)象，就是指宿主對(duì)象 對(duì)比-函數(shù)調(diào)用模式： 方法調(diào)用模式是不是獨(dú)立的，需要宿主，而函數(shù)調(diào)用模式是獨(dú)立的 方法調(diào)用模式方式：obj.fuc(); 函數(shù)調(diào)用模式方式: fuc(); 方法調(diào)用模式中，this指宿主。而函數(shù)調(diào)用模式中 this 指 全局對(duì)象window 美團(tuán)的一道面試題 ? var length = 10; ? function fn() { ? console.log( this.length ); // 10 ? } ? var obj = { ? length: 5, ? method: function ( fn ) { ? fn(); // 10 前面沒有引導(dǎo)對(duì)象，是函數(shù)調(diào)用模式 ? arguments[ 0 ](); // 2 ? // arguments是一個(gè)偽數(shù)組對(duì)象, 這里調(diào)用相當(dāng)于通過數(shù)組的索引來調(diào)用. ? // 這里 this 就是 指的這個(gè)偽數(shù)組， 所以 this.length 為 2 ? } ? }; ? obj.method( fn, 1 ); // 打印 10 和 2 ? //obj.method( fn, 1， 2， 3 ); // 打印 10 和 4 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15解析： fn() 前面沒有引導(dǎo)對(duì)象，是函數(shù)調(diào)用模式, this是全局對(duì)象,輸出 10 arguments[ 0 ]()，arguments是一個(gè)偽數(shù)組對(duì)象, 這里調(diào)用相當(dāng)于通過數(shù)組的索引來調(diào)用. 這里引導(dǎo)對(duì)象即宿主就是 arguments對(duì)象。 所以，執(zhí)行時(shí)，this 就是指 arguments,由于傳了兩個(gè)參數(shù)，所以 輸出為 arguments.length 就是 2 3. 構(gòu)造器模式(構(gòu)造函數(shù)模式, 構(gòu)造方法模式)constructor 特點(diǎn)：?使用 new 關(guān)鍵字引導(dǎo) 執(zhí)行步驟：var p = new Person(); new 是一個(gè)運(yùn)算符, 專門用來申請(qǐng)創(chuàng)建對(duì)象, 創(chuàng)建出來的對(duì)象傳遞給構(gòu)造函數(shù)的 this。然后利用構(gòu)造函數(shù)對(duì)其初始化。 ? function Person () { ? // new了 進(jìn)入構(gòu)造函數(shù)時(shí)， p 對(duì)象的原型 就指向了 構(gòu)造函數(shù) Person， ? // p.__proto__.constructor = function Person() {}; ? // 而 this 指的的是 p 對(duì)象 ? this.name = 'jim', ? this.age = 19; ? this.gender = 'male'; ? } ? var p = new Person(); 1 2 3 4 5 6 7 8 9執(zhí)行完 new 進(jìn)入構(gòu)造函數(shù)時(shí)， p 對(duì)象的原型 就指向了 構(gòu)造函數(shù) Person 而 構(gòu)造時(shí)，this 指的的是 p 對(duì)象，是通過對(duì)象動(dòng)態(tài)添加屬性來構(gòu)造的 小貼士：如果調(diào)用構(gòu)造函數(shù)的時(shí)候, 構(gòu)造函數(shù)沒有參數(shù), 圓括號(hào)是可以省略的。 ? function Person() { ? this.name = 'jim'; ? } ? var p = new Person; // 不傳參，可以簡(jiǎn)寫，不影響構(gòu)造 ? console.log( p ); // p 含有 name屬性 1 2 3 4 5↑ 不傳參，可以簡(jiǎn)寫，不影響構(gòu)造 返回值 不寫 return 語句, 那么 構(gòu)造函數(shù)?默認(rèn)返回 this 在構(gòu)造函數(shù)?return 基本類型( return num, return 1223 ). 則忽略返回類型. 在構(gòu)造函數(shù)?return 引用類型, 那么構(gòu)造函數(shù)返回該引用類型數(shù)據(jù), 而忽略 this ? function Person () { ? this.name = 'Jepson'; ? return 123; ? } ? var p1 = new Person(); ? console.log( p1 ); 1 2 3 4 5 6↑ 忽略了 123，返回 this 對(duì)象, 指向構(gòu)建的實(shí)例 ? function Person () { ? this.name = 'Jepson'; ? return { 'peter': 'nihao' }; ? } ? var p1 = new Person(); ? console.log( p1 ); 1 2 3 4 5 6↑ 忽略了 this，返回 { ‘peter’: ‘nihao’ } 對(duì)象 構(gòu)造函數(shù)結(jié)合性如果構(gòu)造函數(shù)沒有參數(shù), 可以省略 圓括號(hào) var p = new Person; 如果希望創(chuàng)建對(duì)象并直接調(diào)用其方法 ( new Person () ).sayHello() -> 可以省略調(diào)整結(jié)核性的圓括號(hào) new Person().sayHello() ->?如果想要省略構(gòu)造函數(shù)的圓括號(hào), 就必須添加結(jié)核性的圓括號(hào) (new Person).sayHello() 面試題一道面試題，大家可以自己嘗試先做一下，再看下面的答案和解析 請(qǐng)問順序執(zhí)行下面代碼，會(huì)怎樣 alert ? function Foo(){ ? getName = function(){ alert(1); }; ? return this; ? } ? Foo.getName = function(){ alert(2); }; ? Foo.prototype.getName = function(){ alert(3); }; ? var getName = function(){ alert(4); }; ? function getName(){ alert(5); } ? ? ? Foo.getName(); // alert ?? ? getName(); // alert ?? ? Foo().getName(); // alert ?? ? getName(); // alert ?? ? new Foo.getName(); // alert ?? ? new Foo().getName(); // alert ?? ? new new Foo().getName(); // alert ?? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16預(yù)解析，簡(jiǎn)化后的代碼，以及答案 ? /* function getName(){ alert(5); } 執(zhí)行到下面被覆蓋了，直接刪除 */ ? function Foo() { ? getName = function () { alert(1); }; ? return this; ? } ? Foo.getName = function () { alert(2); }; ? Foo.prototype.getName = function () { alert(3); }; ? var getName = function () { alert(4); }; ? ? ? Foo.getName(); // ------- 輸出 2 ------- ? getName(); // ------- 輸出 4 ------- ? Foo().getName(); // ------- 輸出 1 ------- ? getName(); // ------- 輸出 1 ------- ? new Foo.getName(); // ------- 輸出 2 ------- ? new Foo().getName(); // ------- 輸出 3 ------- ? var p = new new Foo().getName(); // ------- 輸出 3 ------- 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16全部解析過程 ↓ ? function Foo() { ? getName = function () { alert(1); }; ? return this; ? } ? Foo.getName = function () { alert(2); }; ? Foo.prototype.getName = function () { alert(3); }; ? var getName = function () { alert(4); }; ? ? ? Foo.getName(); // ------- 輸出 2 ------- ? // 調(diào)用 Foo函數(shù) 作為 對(duì)象 動(dòng)態(tài)添加的屬性方法 getName ? // Foo.getName = function () { alert(2); }; ? ? ? getName(); // ------- 輸出 4 ------- ? // 這里 Foo函數(shù) 還沒有執(zhí)行，getName還沒有被覆蓋 ? // 所以 這里還是 最上面的 getName = function () { alert(4); }; ? ? ? Foo().getName(); // ------- 輸出 1 ------- ? // Foo()執(zhí)行，先覆蓋全局的 getName 再返回 this， ? // this 是 window, Foo().getName() 就是調(diào)用 window.getName ? // 此時(shí) 全局的 getName已被覆蓋成 function () { alert(1); }; ? // 所以 輸出 1 ? /* 從這里開始 window.getName 已被覆蓋 alert 1 */ ? ? ? getName(); // -------- 輸出 1 -------- ? // window.getName alert(1); ? ? ? new Foo.getName(); // ------- 輸出 2 ------- ? // new 就是 找 構(gòu)造函數(shù)()，由構(gòu)造函數(shù)結(jié)合性，這里即使 Foo無參，也不能省略 (),所以不是 Foo().getName() ? // 所以 Foo.getName 為一個(gè)整體，等價(jià)于 new (Foo.getName)(); ? // 而 Foo.getName 其實(shí)就是函數(shù) function () { alert(2); } 的引用 ? // 那 new ( Foo.getName )(), 就是在以 Foo.getName 為構(gòu)造函數(shù) 實(shí)例化對(duì)象。 ? // 就 類似于 new Person(); Person 是一個(gè)構(gòu)造函數(shù) ? ? ? // 總結(jié)來看 new ( Foo.getName )(); 就是在以 function () { alert(2); } 為構(gòu)造函數(shù)來構(gòu)造對(duì)象 ? // 構(gòu)造過程中 alert（ 2 ），輸出 2 ? ? ? new Foo().getName(); // ------- 輸出 3 ------- ? // new 就是 找 構(gòu)造函數(shù)(),等價(jià)于 ( new Foo() ).getName(); ? // 執(zhí)行 new Foo() => 以 Foo 為構(gòu)造函數(shù)，實(shí)例化一個(gè)對(duì)象 ? // ( new Foo() ).getName; 訪問這個(gè)實(shí)例化對(duì)象的 getName 屬性 ? // 實(shí)例對(duì)象自己并沒有 getName 屬性，構(gòu)造的時(shí)候也沒有 添加，找不到，就到原型中找 ? // 發(fā)現(xiàn) Foo.prototype.getName = function () { alert(3); }; ? // 原型中有，找到了，所以 ( new Foo() ).getName(); 執(zhí)行，alert（3） ? ? ? var p = new new Foo().getName(); // ------- 輸出 3 ------- ? // new 就是 找 構(gòu)造函數(shù)(),等價(jià)于 new ( ( new Foo() ).getName )() 輸出 3 ? ? ? // 先看里面的 ( new Foo() ).getName ? // new Foo() 以Foo為構(gòu)造函數(shù)，實(shí)例化對(duì)象 ? // new Foo().getName 找 實(shí)例對(duì)象的 getName屬性，自己沒有，去原型中找， ? // 發(fā)現(xiàn) Foo.prototype.getName = function () { alert(3); }; 找到了 ? ? ? // 所以里層 ( new Foo() ).getName 就是 以Foo為構(gòu)造函數(shù)實(shí)例出的對(duì)象的 一個(gè)原型屬性 ? // 屬性值為一個(gè)函數(shù) function () { alert(3); } 的引用 ? ? ? // 所以外層 new ( (new Foo()).getName )()在以該函數(shù) function () { alert(3); } 為構(gòu)造函數(shù)，構(gòu)造實(shí)例 ? // 構(gòu)造過程中 執(zhí)行了 alert(3)， 輸出 3 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 4. 上下文調(diào)用模式就是 環(huán)境調(diào)用模式 => 在不同環(huán)境下的不同調(diào)用模式 簡(jiǎn)單說就是統(tǒng)一一種格式, 可以實(shí)現(xiàn) 函數(shù)模式與方法模式 -> 語法(區(qū)分) call 形式， 函數(shù)名.call( … ) apply 形式， 函數(shù)名.apply( … )這兩種形式功能完全一樣, 唯一不同的是參數(shù)的形式. 先學(xué)習(xí) apply, 再來看 call 形式 apply方法的調(diào)用形式存在上下文調(diào)用的目的就是為了實(shí)現(xiàn)方法借用，且不會(huì)污染對(duì)象。 如果需要讓函數(shù)以函數(shù)的形式調(diào)用, 可以使用 foo.apply( null ); // 上下文為 window 如果希望他是方法調(diào)用模式, 注意需要提供一個(gè)宿主對(duì)象 foo.apply( obj ); // 上下文 為 傳的 obj 對(duì)象 ? function foo () { ? console.log( this ); ? } ? var o = { name: 'jim' }; ? ? ? // 如果需要讓函數(shù)以函數(shù)的形式調(diào)用, 可以使用 ? foo.apply( null ); // this => window // 或 foo.apply() ? ? ? // 如果希望他是方法調(diào)用模式, 注意需要提供一個(gè)宿主對(duì)象 ? foo.apply( o ) // this => o 對(duì)象 1 2 3 4 5 6 7 8 9 10 帶有參數(shù)的函數(shù)如何實(shí)現(xiàn)上下文調(diào)用？ ? function foo ( num1, num2 ) { ? console.log( this ); ? return num1 + num2; ? } ? ? ? // 函數(shù)調(diào)用模式 ? var res1 = foo( 123, 567 ); ? ? ? // 方法調(diào)用 ? var o = { name: 'jim' }; ? oc = foo; ? var res2 = oc( 123, 567 ); 1 2 3 4 5 6 7 8 9 10 11 12使用 apply 進(jìn)行調(diào)用, 如果函數(shù)是帶有參數(shù)的. apply 的第一個(gè)參數(shù)要么是 null 要么是對(duì)象 如果是 null 就是函數(shù)調(diào)用 如果是 對(duì)象就是 方法調(diào)用, 該對(duì)象就是宿主對(duì)象, 后面緊跟一個(gè)數(shù)組參數(shù), 將函數(shù)所有的參數(shù)依次放在數(shù)組中. ? 例如: 函數(shù)模式 foo( 123, 567 ); ? apply foo.apply( null, [ 123, 567 ] ) 以 window 為上下文執(zhí)行 apply ? ? ? 如果有一個(gè)函數(shù)調(diào)用: func( '張三', 19, '男' ), ? 將其修改成 apply 模式： func.apply( null, [ '張三', 19, '男'] ) ? ? ? 方法模式: oc( 123, 567 ) ? apply var o = { name: 'jim' }; ? foo.apply( o, [ 123, 567 ] ); 以 o 為上下文執(zhí)行 apply 1 2 3 4 5 6 7 8 9 方法借用的案例需求, 獲得 div 與 p 標(biāo)簽, 并添加邊框 border: 1px solid red 一般做法： ? var p_list = document.getElementsByTagName('p'); ? var div_list = document.getElementsByTagName('div'); ? ? ? var i = 0; ? for( ; i < p_list.length; i++ ) { ? p_list[ i ].style.border = "1px solid red"; ? } ? for( i = 0; i < div_list.length; i++ ) { ? div_list[ i ].style.border = "1px solid red"; ? } 1 2 3 4 5 6 7 8 9 10 利用方法借用優(yōu)化，元素獲取 ? var t = document.getElementsByTagName; ? var p_list = t.apply( document, [ 'p' ] ); // 方法借用 ? var div_list = t.apply( document, [ 'div' ] ); // 方法借用 1 2 3接下來考慮下面的優(yōu)化，兩個(gè)for循環(huán)，只要將數(shù)組合并了，就可以只用一個(gè) for 循環(huán) 數(shù)組合并 ? var arr1 = [ 1, 2, 3 ]; ? var arr2 = [ 5, 6 ]; ? arr1.push.apply( arr1, arr2 ); // 方法調(diào)用，第一個(gè)給上對(duì)象 ? // 等價(jià)于 Array.prototype.push.apply( arr1, arr2 ); 1 2 3 4所以同理,利用 apply 方法借用，將兩個(gè)偽數(shù)組合并成同一個(gè)數(shù)組 ? var arr = []; // 偽數(shù)組沒有 push 方法，所以這里要 聲明一個(gè) 數(shù)組 ? arr.push.apply( arr, p_list ); // 將 p_list里的內(nèi)容，一個(gè)個(gè)當(dāng)成參數(shù)放了進(jìn)來，相當(dāng)于不用遍歷了 ? arr.push.apply( arr, div_list ); // 同上，方法借用 ? console.log( arr ); 1 2 3 4將兩者綜合, 使用forEach，最終 6 行就解決了 ? var t = document.getElementsByTagName, arr = []; ? arr.push.apply( arr, t.apply( document, [ 'p' ] ) ); ? arr.push.apply( arr, t.apply( document, [ 'div'] ) ); ? arr.forEach( function( val, index, arr ) { ? val.style.border = '1px solid red'; ? }); 1 2 3 4 5 6 call 調(diào)用在使用 apply 調(diào)用的時(shí)候, 函數(shù)參數(shù), 必須以數(shù)組的形式存在. 但是有些時(shí)候數(shù)組封裝比較復(fù)雜 所以引入 call 調(diào)用, call 調(diào)用與 apply 完全相同, 唯一不同是 參數(shù)不需要使用數(shù)組 ? foo( 123, 567 ); ? ? ? foo.apply( null, [ 123, 567 ] ); ? ? ? foo.call( null, 123, 567 ); 1 2 3 4 5函數(shù)調(diào)用： 函數(shù)名.call( null, 參數(shù)1，參數(shù)2，參數(shù)3… ); 方法調(diào)用： 函數(shù)名.call( obj, 參數(shù)1，參數(shù)2， 參數(shù)3… ); 不傳參時(shí)，apply 和 call 完全一樣 借用構(gòu)造方法實(shí)現(xiàn)繼承 ? function Person ( name, age, gender ) { ? this.name = name; ? this.age = age; ? this.gender = gender; ? } ? ? ? function Student ( name, age, gender, course ) { ? // 原型鏈結(jié)構(gòu)不會(huì)變化，同時(shí)實(shí)現(xiàn)了繼承的效果 ? Person.call( this, name, age, gender );// 借用Person構(gòu)造方法 ? this.course = course; ? } ? ? ? var p = new Student ( 'jim', 19, 'male', '前端' ); ? console.log( p ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 補(bǔ)充知識(shí) 1. 函數(shù)的 bind 方法 （ ES5 ）bind 就是 綁定 還是上面那個(gè)案例?獲得 div 與 p 標(biāo)簽, 并添加邊框 border: 1px solid red ? var t = document.getElementsByTagName, arr = []; ? arr.push.apply( arr, t.call( document, 'p' ) ); ? arr.push.apply( arr, t.call( document, 'div' ) ); ? arr.forEach( function( val, index, arr ) { ? val.style.border = '1px solid red'; ? }); 1 2 3 4 5 6我們 讓 t 包含函數(shù)體（上面的方式），同時(shí)包含 對(duì)象，就可以更精簡(jiǎn) ? var t = document.getElementsByTagName.bind( document ), arr = []; ? arr.push.apply( arr, t('p') ); ? arr.push.apply( arr, t('div') ); ? arr.forEach( function( val, index, arr ) { ? val.style.border = '1px solid red'; ? }); 1 2 3 4 5 6bind : 就是讓函數(shù)綁定對(duì)象的一種用法 函數(shù)本身就是可以調(diào)用, 但是其如果想要作為方法調(diào)用, 就必須傳入宿主對(duì)象, 并且使用 call 或 apply 形式 但是?bind 使得我的函數(shù)可以與某一個(gè)對(duì)象綁定起來, 那么在調(diào)用函數(shù)的時(shí)候, 就好像是該對(duì)象在調(diào)用方法，就可以直接傳參，而不需要傳宿主對(duì)象。 語法： 函數(shù).bind( 對(duì)象 ) 返回一個(gè)函數(shù) foo，那么調(diào)用 返回的函數(shù) foo, 就好像 綁定的對(duì)象在調(diào)用 該方法一樣 ? t.call( document, 'p' ); ? ? ? t( 'p' ); 綁定后，就不用傳宿主對(duì)象了，這里調(diào)用時(shí)上下文已經(jīng)變成了 document ? ? ? bind 是 ES 5 給出的函數(shù)調(diào)用方法 1 2 3 4 5 補(bǔ)充知識(shí) 2. Object.prototype 的成員Object.prototype 的成員 constructor hasOwnProperty 判斷該屬性是否為自己提供 propertyIsEnumerable 判斷屬性是否可以枚舉 isPrototypeOf 判斷是否為原型對(duì)象 toString, toLocaleString, valueOf ? function Person() { ? this.name = 'jim'; ? } ? Person.prototype.age = 19; ? var p = new Person(); ? console.log( p.hasOwnProperty( 'name' ) ); // true; p 是否含有 name 屬性，原型上不管 ? console.log( p.hasOwnProperty( 'age' ) ); // false; p 是否含有 age 屬性 ? ? ? /* Person.prototype 是 p 的原型 */ ? console.log( p.isPrototypeOf( Person.prototype ) ); // false ? console.log( Person.prototype.isPrototypeOf( p ) ); // true; 1 2 3 4 5 6 7 8 9 10 11用途：一般把一個(gè)對(duì)象拷貝到另一個(gè)對(duì)象時(shí)，可以進(jìn)行判斷，更加嚴(yán)謹(jǐn)，以防把原型中的屬性也拷貝過去了… 補(bǔ)充知識(shí) 3. 包裝類型字符串 string 是基本類型,?理論上講不應(yīng)該包含方法 那么 charAt, substr, slice, …等等方法，理論上都不應(yīng)該有，但確是有的 所以引入包裝對(duì)象的概念，在 js 中為了更好的使用數(shù)據(jù), 為三個(gè)基本類型提供了對(duì)應(yīng)的對(duì)象類型 Number String Boolean在 開發(fā)中常常會(huì)使用基本數(shù)據(jù)類型, 但是基本數(shù)據(jù)類型沒有方法, 因此 js 引擎會(huì)在需要的時(shí)候自動(dòng)的將基本類型轉(zhuǎn)換成對(duì)象類型, 就是包裝對(duì)象 “abc”.charAt( 1 ) “abc” -> s = new String( “abc” ) s.charAt( 1 ) 返回結(jié)果以后 s 就被銷毀 當(dāng)基本類型.方法 的時(shí)候. 解釋器首先將基本類型轉(zhuǎn)換成對(duì)應(yīng)的對(duì)象類型, 然后調(diào)用方法. 方法執(zhí)行結(jié)束后, 這個(gè)對(duì)象就被立刻回收 在 apply 和 call 調(diào)用的時(shí)候, 也會(huì)有轉(zhuǎn)換發(fā)生.?上下文調(diào)用的第一個(gè)參數(shù)必須是對(duì)象.?如果傳遞的是數(shù)字就會(huì)自動(dòng)轉(zhuǎn)換成對(duì)應(yīng)的包裝類型 補(bǔ)充知識(shí) 4. getter 和 setter 的語法糖 ( ES5 )語法糖: 為了方便開發(fā)而給出的語法結(jié)構(gòu) 本身實(shí)現(xiàn)： ? var o = (function () { ? var num = 123; ? return { ? get_num: function () { ? return num; ? }, ? set_num: function ( v ) { ? num = v; ? } ? }; ? })(); 1 2 3 4 5 6 7 8 9 10 11 ? 希望獲得數(shù)據(jù) 以對(duì)象的形式 ? o.get_num(); => o.num 形式 ? ? ? 希望設(shè)置數(shù)據(jù) 以對(duì)象的形式 ? o.set_num( 456 ); => o.num = 456 形式 1 2 3 4 5所以 getter 和 setter 誕生 了 ? var o = (function () { ? var num = 123; ? return { ? // get 名字 () { 邏輯體 } ? get num () { ? console.log( '執(zhí)行 getter 讀寫器了' ); ? return num; ? }, ? ? ? // set 名字 ( v ) { 邏輯體 } ? set num ( v ) { ? console.log( '執(zhí)行 setter 讀寫器了' ); ? num = v; ? } ? }; ? })(); ? ? ? console.log( o.num ); // 執(zhí)行 getter 讀寫器了 123 ? o.num = 33; // 執(zhí)行 setter 讀寫器了 ? console.log( o.num ); // 執(zhí)行 getter 讀寫器了 33 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21為什么不直接用 對(duì)象呢 var o = { num : 123 } ，也可以讀寫呀? 因?yàn)檎Z法糖還可以?限制其賦值的范圍，使用起來特別爽 ? var o = (function () { ? var num = 13; ? return { ? ? ? // get 名字 () { 邏輯體 } ? get num () { ? console.log( '執(zhí)行 getter 讀寫器了' ); ? return num; ? }, ? ? ? // set 名字 ( v ) { 邏輯體 } ? set num ( v ) { ? console.log( '執(zhí)行 setter 讀寫器了' ); ? ? ? if ( v < 0 || v > 150 ) { ? console.log( '賦值超出范圍, 不成功 ' ); ? return; ? } ? num = v; ? } ? }; ? })(); ? o.num = -1; // 執(zhí)行 setter 讀寫器了 ? // 讀寫器賦值超出范圍, 不成功 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 補(bǔ)充知識(shí) 5. ES5 中引入的部分?jǐn)?shù)組方法 forEach map filter some every indexOf lastIndexOfforEach, 數(shù)組遍歷調(diào)用，遍歷arr，參數(shù)三個(gè) 1某項(xiàng), 2索引， 3整個(gè)數(shù)組 ? var arr = [ 'hello', ' js', { }, function () {} ]; ? // 遍歷 數(shù)組 ? arr.forEach( function ( v, i, ary ) { ? console.log( i + '=====' + v ); ? console.log( ary ); ? }); 1 2 3 4 5 6map 映射 語法: 數(shù)組.map( fn ) 返回一個(gè)數(shù)組, 數(shù)組的每一個(gè)元素就是 map 函數(shù)中的 fn 的返回值 就是對(duì)每一項(xiàng)都進(jìn)行作，并返回 ? var arr = [ 1, 2, 3, 4 ]; ? // 數(shù)學(xué)中: x -> x * x ? var a = arr.map(function ( v, i ) { ? return v * v; ? }); ? // a [1, 4, 9, 16] 1 2 3 4 5 6filter 就是篩選, 函數(shù)執(zhí)行結(jié)果是 false 就棄掉， true 就收著 語法: 數(shù)組.filter( function ( v, i ) { return true/false }) ? var arr = [ 1, 2, 3, 4, 5, 6 ]; ? // 篩選奇數(shù) ? var a = arr.filter( function ( v ) { return v % 2 === 1; }); ? // a [ 1, 3, 5 ] 1 2 3 4some 判斷數(shù)組中至少有一個(gè)數(shù)據(jù)復(fù)合要求 就返回 true, 否則返回 false ? var arr = [ '123', {}, function () {}, 123 ]; ? // 判斷數(shù)組中至少有一個(gè)數(shù)字 ? var isTrue = arr.some( function ( v ) { return typeof v === 'number'; } ); // true; 1 2 3every 必須滿足所有元素都復(fù)合要求才會(huì)返回 true ? var arr = [ 1, 2, 3, 4, 5, '6' ]; ? // 判斷數(shù)組中每一個(gè)都是數(shù)字 ? var isTrue = arr.every( function ( v ) { return typeof v === 'number'; } ); } ); // false; 1 2 3indexOf 在數(shù)組中查找元素, 如果含有該元素, 返回元素的需要( 索引 ), 否則返回 -1 ? var arr = [ 1, 2, 3, 4, 5 ]; ? var res = arr.indexOf( 4 ); // 要找 4 ? console.log( res ); // 3 找 4 在 索引為 3 找到 ? ? ? var arr = [ 1, 2, 3, 4, 5, 4, 5, 6 ]; ? var res = arr.indexOf( 4, 4 ); // 要找 4， 從索引 4開始找 ? console.log( res ); // 找到了 索引為 5 1 2 3 4 5 6 7lastIndexOf 從右往左找 ? var arr = [ 1, 2, 3, 4, 5, 4, 5, 6 ]; ? var res = arr.lastIndexOf( 4 ); ? console.log( res ); // 索引為 5， 從最后一項(xiàng)開始找，即從 length-1 項(xiàng)開始找? |
| 今日新聞 |
| 推薦新聞 |
| 專題文章 |
| CopyRight 2018-2019 實(shí)驗(yàn)室設(shè)備網(wǎng) 版權(quán)所有 |