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

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

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

1.排序法

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

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ù)組中后面的每一項,和假設的值進行比較,如果比假設的值要大,把當前項賦值給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));

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

this

什么是this

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

怎么判斷this

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

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

對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調用，但call改變了this指向，this的指向是obj,故obj.name的值為objName
fn.call(obj1);//obj1Name

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

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

CALL中的細節(jié)

1.非嚴格模式下，如果參數(shù)不傳，或者第一個傳遞的是null/undefined，this都指向window
2.在嚴格模式下，第一個參數(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ù)放到一個數(shù)組（或者類數(shù)組）中傳遞進去，雖然寫的是一個數(shù)組，但是也相當于給FN一個個的傳遞

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

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

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

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

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

4.ES6展開運算符

console.log(Math.max(...arr));

GPU云服務器云服務器深入理解javascript javaScript中的this javascript中的二維數(shù)組 javascript數(shù)組方法

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106627.html

深入理解 Javascript 之 this

摘要：深入淺出的理解問題的由來寫法一寫法二雖然和指向同一個函數(shù)，但是執(zhí)行結果可能不一樣。該變量由運行環(huán)境提供。所以，就出現(xiàn)了，它的設計目的就是在函數(shù)體內部，指代函數(shù)當前的運行環(huán)境。深入淺出this的理解問題的由來 var obj = { foo: function(){} } var foo = obj.foo; // 寫法一 obj.foo(); // 寫法二 foo...

OnlyMyRailgun 2019-08-23 10:54 評論0 收藏0
【進階3-3期】深度解析 call 和 apply 原理、使用場景及實現(xiàn)

摘要：之前文章詳細介紹了的使用，不了解的查看進階期。不同的引擎有不同的限制，核心限制在，有些引擎會拋出異常，有些不拋出異常但丟失多余參數(shù)。存儲的對象能動態(tài)增多和減少，并且可以存儲任何值。這邊采用方法來實現(xiàn)，拼成一個函數(shù)。之前文章詳細介紹了 this 的使用，不了解的查看【進階3-1期】。 call() 和 apply() call() 方法調用一個函數(shù), 其具有一個指定的 this 值和分...

godlong_X 2019-08-23 14:31 評論0 收藏0
《javascript高級程序設計》函數(shù)調用模式 & this深度理解

在上一篇文章（《javascript高級程序設計》筆記：Function類型）中稍微提及了一下函數(shù)對象的屬性—this，在這篇文章中有深入的說明：函數(shù)的三種簡單調用模式 1 函數(shù)模式定義的函數(shù)，如果單獨調用，不將其與任何對象關聯(lián)，那么就是函數(shù)調用模式 function fn(num1, num2) { console.log(this); } // 直接在全局調用 fn();// w...

wyk1184 2019-08-21 16:22 評論0 收藏0
前端基礎:call,apply,bind的的理解

摘要：和區(qū)別其實他們的作用是一樣的，只是傳遞的參數(shù)不一樣而已。接受個參數(shù)，第一個參數(shù)指定了函數(shù)體內對象的指向，第二個參數(shù)為數(shù)組或者一個類數(shù)組?？磦€栗子一個有意思的事在中，多次是無效的。而則會立即執(zhí)行函數(shù)。背景前兩天在做小程序的需求的時候用到bind的時候才想起自己對這三的東西的了解比較淺薄，這個時候用的時候就有點怕。時候還是要好好學習下，理解下怎么玩。正文先說call 和 apply...

netmou 2019-08-20 17:01 評論0 收藏0
JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統(tǒng)的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續(xù)了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數(shù) 學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環(huán)大法了~ 《小分享》JavaScript中數(shù)組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0