深入理解JavaScript（三）：獲取數(shù)組中的最大值方法（this,apply）

canopus4u 發(fā)布于2019-08-26 10:42 / 863人閱讀

摘要：三個(gè)方法的作用，都是改變的指向，只是用法稍微有些區(qū)別什么是既不指向函數(shù)自身，也不指函數(shù)的詞法作用域。它在函數(shù)定義的時(shí)候是確定不了的在函數(shù)被調(diào)用時(shí)才發(fā)生的綁定，也就是說具體指向什么，取決于你是怎么調(diào)用的函數(shù)。

1.排序法

思路：給數(shù)組先排序(由大到小排序),第一項(xiàng)就是最大值

let arr = [1,5,6,7,9,20,40,2,3];
let max1 = arr.sort(function(a,b){
    return b-a;
})[0];
console.log(max1);

2.假設(shè)法

思路：假設(shè)第一個(gè)值是最大值,依次遍歷數(shù)組中后面的每一項(xiàng),和假設(shè)的值進(jìn)行比較,如果比假設(shè)的值要大,把當(dāng)前項(xiàng)賦值給MAX...

let arr = [1,5,6,7,9,20,40,2,3];
let max2 = arr[0];
for(let i = 1; i <= arr.length; i++){
    let item = arr[i];
    item > max2 ? max2 = item : null;
}
console.log(max2);

3.基于Math.max與apply

思路：基于基于Math.max完成和apply特性

let arr = [1,5,6,7,9,20,40,2,3];
console.log(Math.max.apply(null, arr));

這個(gè)是要重點(diǎn)理解的一個(gè)方案，call,apply,bind常常會(huì)被放一起比較
首先，call，apply，bind這三個(gè)方法其實(shí)都是繼承自Function.prototype中的，屬于實(shí)例方法。
三個(gè)方法的作用，都是改變this的指向，只是用法稍微有些區(qū)別

this

什么是this

this 既不指向函數(shù)自身，也不指函數(shù)的詞法作用域。它在函數(shù)定義的時(shí)候是確定不了的,在函數(shù)被調(diào)用時(shí)才發(fā)生的綁定，也就是說this具體指向什么，取決于你是怎么調(diào)用的函數(shù)。

怎么判斷this

1.給當(dāng)前元素的某個(gè)事件綁定方法, 當(dāng)事件觸發(fā)方法執(zhí)行的時(shí)候，方法中的THIS是當(dāng)前操作的元素對(duì)象
2.普通函數(shù)執(zhí)行，函數(shù)中的THIS取決于執(zhí)行的主體，誰執(zhí)行的，THIS就是誰（執(zhí)行主體：方法執(zhí)行，看方法名前面是否有“點(diǎn)”，有的話，點(diǎn)前面是誰this就是誰，沒有this是window）
下面看個(gè)例子：

function myFunction(){
    console.log(this===window);
}    
var obj = {
    myFunction(){
        console.log(this===obj);
    }
}
myFunction();//true
obj.myFunction();//true

對(duì)this有了大致了解后，再來看call方法

window.name = "windowName";
let fn = function(){
    console.log(this.name);
}
let obj = {
    name:"objName"
}
let obj1 = {
    name:"obj1Name"
}
fn();//windowName
fn.call(obj);//objName：雖然是fn調(diào)用，但call改變了this指向，this的指向是obj,故obj.name的值為objName
fn.call(obj1);//obj1Name

call方法執(zhí)行的時(shí)候，內(nèi)部處理了一些事情。首先把要操作函數(shù)中的this關(guān)鍵字變?yōu)閏all方法第一個(gè)傳遞的實(shí)參值,把call方法第二個(gè)及第二個(gè)以后的實(shí)參獲取到，把要操作的函數(shù)執(zhí)行，并且把第二個(gè)以后的傳遞進(jìn)來的實(shí)參傳給函數(shù)

function fn(a, b) {
   console.log(a + b);
}
fn.call(null, 1, 2); //3

CALL中的細(xì)節(jié)

1.非嚴(yán)格模式下，如果參數(shù)不傳，或者第一個(gè)傳遞的是null/undefined，this都指向window
2.在嚴(yán)格模式下，第一個(gè)參數(shù)是誰，this就指向誰（包括null/undefined），不傳this是undefined
在上述代碼中，如果用apply，則是

function fn(a, b) {
   console.log(a + b);
}
fn.apply(null, [1, 2]); //3

apply：和call基本上一模一樣，唯一區(qū)別在于傳參方式

fn.call(obj,10,20)
fn.apply(obj,[10,20]) //APPLY把需要傳遞給FN的參數(shù)放到一個(gè)數(shù)組（或者類數(shù)組）中傳遞進(jìn)去，雖然寫的是一個(gè)數(shù)組，但是也相當(dāng)于給FN一個(gè)個(gè)的傳遞

bind：語法和call一模一樣，唯一的區(qū)別在于立即執(zhí)行還是等待執(zhí)行

fn.call(obj,10,20) 改變FN中的THIS,并且把FN立即執(zhí)行
fn.bind(obj,10,20) 改變FN中的THIS,此時(shí)的FN并沒有執(zhí)行（不兼容IE6~8）

bind調(diào)用之后是返回原函數(shù)，需要再調(diào)用一次才行

回到原題，求數(shù)組最大值
Math.max(arr)這樣肯定是報(bào)錯(cuò)的

console.log(Math.max(ary));//=>NaN 
//=>Math.max是獲取一堆數(shù)中的最大值,需要我們把比較的數(shù),一個(gè)個(gè)的傳遞給這個(gè)方法 //=>Math.max(12,13,14...) =>Math.max([12,13,14...])這樣只是傳遞一個(gè)值
Math.max.apply(null,arr);
//=>利用了apply的一個(gè)特征：雖然放的是一個(gè)數(shù)組，但是執(zhí)行方法的時(shí)候，也是把數(shù)組中的每一項(xiàng)一個(gè)個(gè)的傳遞給函數(shù)

4.ES6展開運(yùn)算符