资讯专栏INFORMATION COLUMN

深入理解JavaScript(三):获取数组中的最大值方法(this,apply)

canopus4u / 867人阅读

摘要:三个方法的作用,都是改变的指向,只是用法稍微有些区别什么是既不指向函数自身,也不指函数的词法作用域。它在函数定义的时候是确定不了的在函数被调用时才发生的绑定,也就是说具体指向什么,取决于你是怎么调用的函数。

1.排序法

思路:给数组先排序(由大到小排序),第一项就是最大值

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.假设法

思路:假设第一个值是最大值,依次遍历数组中后面的每一项,和假设的值进行比较,如果比假设的值要大,把当前项赋值给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的指向,只是用法稍微有些区别

this

什么是this

this 既不指向函数自身,也不指函数的词法作用域。它在函数定义的时候是确定不了的,在函数被调用时才发生的绑定,也就是说this具体指向什么,取决于你是怎么调用的函数

怎么判断this

1.给当前元素的某个事件绑定方法, 当事件触发方法执行的时候,方法中的THIS是当前操作的元素对象
2.普通函数执行,函数中的THIS取决于执行的主体,谁执行的,THIS就是谁(执行主体:方法执行,看方法名前面是否有“点”,有的话,点前面是谁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方法执行的时候,内部处理了一些事情。首先把要操作函数中的this关键字变为call方法第一个传递的实参值,把call方法第二个及第二个以后的实参获取到,把要操作的函数执行,并且把第二个以后的传递进来的实参传给函数

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

CALL中的细节

1.非严格模式下,如果参数不传,或者第一个传递的是null/undefined,this都指向window
2.在严格模式下,第一个参数是谁,this就指向谁(包括null/undefined),不传this是undefined
在上述代码中,如果用apply,则是
function fn(a, b) {
   console.log(a + b);
}
fn.apply(null, [1, 2]); //3

apply:和call基本上一模一样,唯一区别在于传参方式

fn.call(obj,10,20)
fn.apply(obj,[10,20]) //APPLY把需要传递给FN的参数放到一个数组(或者类数组)中传递进去,虽然写的是一个数组,但是也相当于给FN一个个的传递

bind:语法和call一模一样,唯一的区别在于立即执行还是等待执行

fn.call(obj,10,20) 改变FN中的THIS,并且把FN立即执行
fn.bind(obj,10,20) 改变FN中的THIS,此时的FN并没有执行(不兼容IE6~8)

bind调用之后是返回原函数,需要再调用一次才行

回到原题,求数组最大值
Math.max(arr)这样肯定是报错的

console.log(Math.max(ary));//=>NaN 
//=>Math.max是获取一堆数中的最大值,需要我们把比较的数,一个个的传递给这个方法 //=>Math.max(12,13,14...) =>Math.max([12,13,14...])这样只是传递一个值
Math.max.apply(null,arr);
//=>利用了apply的一个特征:虽然放的是一个数组,但是执行方法的时候,也是把数组中的每一项一个个的传递给函数
4.ES6展开运算符
console.log(Math.max(...arr));

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106627.html

相关文章

  • 深入理解 Javascriptthis

    摘要:深入浅出的理解问题的由来写法一写法二虽然和指向同一个函数,但是执行结果可能不一样。该变量由运行环境提供。所以,就出现了,它的设计目的就是在函数体内部,指代函数当前的运行环境。 深入浅出this的理解 问题的由来 var obj = { foo: function(){} } var foo = obj.foo; // 写法一 obj.foo(); // 写法二 foo...

    OnlyMyRailgun 评论0 收藏0
  • 【进阶3-3期】深度解析 call 和 apply 原理、使用场景及实现

    摘要:之前文章详细介绍了的使用,不了解的查看进阶期。不同的引擎有不同的限制,核心限制在,有些引擎会抛出异常,有些不抛出异常但丢失多余参数。存储的对象能动态增多和减少,并且可以存储任何值。这边采用方法来实现,拼成一个函数。 之前文章详细介绍了 this 的使用,不了解的查看【进阶3-1期】。 call() 和 apply() call() 方法调用一个函数, 其具有一个指定的 this 值和分...

    godlong_X 评论0 收藏0
  • javascript高级程序设计》函数调用模式 & this深度理解

    在上一篇文章(《javascript高级程序设计》笔记:Function类型)中稍微提及了一下函数对象的属性—this,在这篇文章中有深入的说明: 函数的三种简单调用模式 1 函数模式 定义的函数,如果单独调用,不将其与任何对象关联,那么就是函数调用模式 function fn(num1, num2) { console.log(this); } // 直接在全局调用 fn();// w...

    wyk1184 评论0 收藏0
  • 前端基础:call,apply,bind的的理解

    摘要:和区别其实他们的作用是一样的,只是传递的参数不一样而已。接受个参数,第一个参数指定了函数体内对象的指向,第二个参数为数组或者一个类数组。看个栗子一个有意思的事在中,多次是无效的。而则会立即执行函数。 背景 前两天在做小程序的需求的时候用到bind的时候才想起自己对这三的东西的了解比较浅薄,这个时候用的时候就有点怕。时候还是要好好学习下,理解下怎么玩。 正文 先说call 和 apply...

    netmou 评论0 收藏0
  • JS程序

    摘要:设计模式是以面向对象编程为基础的,的面向对象编程和传统的的面向对象编程有些差别,这让我一开始接触的时候感到十分痛苦,但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程,否则只会让你自己更痛苦。 JavaScript 中的构造函数 学习总结。知识只有分享才有存在的意义。 是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

    melody_lql 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<