js中改变this指向的call、apply、bind 方法使用美洲杯
分类:计算机教程

前言: 

apply、call 、bind有什么作用,什么区别?

Function.prototype.call()
函数实例的call方法,可以指定函数内部this的指向(即函数执行时所在的作用域),然后在所指定的作用域中,调用该函数。

var obj = {};

var f = function () {
  return this;
};

f() === window // true
f.call(obj) === obj // true

上面代码中,全局环境运行函数f时,this指向全局环境(浏览器为window对象);call方法可以改变this的指向,指定this指向对象obj,然后在对象obj的作用域中运行函数f。

call方法的参数,应该是一个对象。如果参数为空、null和undefined,则默认传入全局对象。

var f = function () {
  return this;
};

f.call(5)
// Number {[[PrimitiveValue]]: 5}

上面代码中,call的参数为5,不是对象,会被自动转成包装对象(Number的实例),绑定f内部的this。

call方法还可以接受多个参数。

func.call(thisValue, arg1, arg2, ...)

call的第一个参数就是this所要指向的那个对象,后面的参数则是函数调用时所需的参数。

function add(a, b) {
  return a   b;
}

add.call(this, 1, 2) // 3

Function.prototype.apply()

apply方法的作用与call方法类似,也是改变this指向,然后再调用该函数。唯一的区别就是,它接收一个数组作为函数执行时的参数,使用格式如下。

func.apply(thisValue, [arg1, arg2, ...])

apply方法的第一个参数也是this所要指向的那个对象,如果设为null或undefined,则等同于指定全局对象。第二个参数则是一个数组,该数组的所有成员依次作为参数,传入原函数。原函数的参数,在call方法中必须一个个添加,但是在apply方法中,必须以数组形式添加。

function f(x, y){
  console.log(x   y);
}

f.call(null, 1, 1) // 2
f.apply(null, [1, 1]) // 2

(1)找出数组最大元素

JavaScript 不提供找出数组最大元素的函数。结合使用apply方法和Math.max方法,就可以返回数组的最大元素。

var a = [10, 2, 4, 15, 9];
Math.max.apply(null, a) // 15

(2)将数组的空元素变为undefined

通过apply方法,利用Array构造函数将数组的空元素变成undefined。

Array.apply(null, ['a', ,'b'])
// [ 'a', undefined, 'b' ]

空元素与undefined的差别在于,数组的forEach方法会跳过空元素,但是不会跳过undefined。因此,遍历内部元素的时候,会得到不同的结果。

var a = ['a', , 'b'];

function print(i) {
  console.log(i);
}

a.forEach(print)
// a
// b

Array.apply(null, a).forEach(print)
// a
// undefined
// b

Function.prototype.bind()
bind方法用于将函数体内的this绑定到某个对象,然后返回一个新函数。

var d = new Date();
d.getTime() // 1481869925657

var print = d.getTime;
print() // Uncaught TypeError: this is not a Date object.

var print = d.getTime.bind(d);
print() // 1481869925657

bind方法将getTime方法内部的this绑定到d对象,这时就可以安全地将这个方法赋值给其他变量了。

var counter = {
  count: 0,
  inc: function () {
    this.count  ;
  }
};

var obj = {
  count: 100
};
var func = counter.inc.bind(obj);
func();
obj.count // 101

本文由美洲杯赔率发布于计算机教程,转载请注明出处:js中改变this指向的call、apply、bind 方法使用美洲杯

上一篇:如何学习Python,让自己找到高薪的Python工作?美 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • 应用canvas绘制动态时钟--每秒自动动态更新时间,
    应用canvas绘制动态时钟--每秒自动动态更新时间,
    使用canvas绘制时钟 下文是部分代码,完整代码参照: https://github.com/lemoncool/canvas-clock ,可直接下载。 首先看一下效果图:每隔一秒会动态更新时间 一、前
  • Expression经验之前言,Expression经验美洲杯赔率
    Expression经验之前言,Expression经验美洲杯赔率
    对于C#中的Expression特性想必从事C#开发的同学都不会陌生,网上和园子里都有很多的好的文章介绍。我想也没有必要再去写一些文章去介绍,科普或是从入
  • 10分钟学会前端调试利器——FireBug
    10分钟学会前端调试利器——FireBug
    10分钟学会前端调试利器——FireBug 2015/09/17 · HTML5 , JavaScript · 1评论 · 调试 原文出处: 惟吾德馨(@Allen_Bryant)     作者:惟吾德馨‘ 原文地址: http:
  • Data URI(转)
    Data URI(转)
    细说 Data URI 2015/08/27 · HTML5 · URI 原文出处: 李靖(@Barret李靖)     Data URL 早在 1995 年就被提出,那个时候有很多个版本的 Data URL Schema定义陆续出现在 
  • Chrome开发者工具不完全指南:(三、性能篇)美
    Chrome开发者工具不完全指南:(三、性能篇)美
    Chrome开发者工具不完全指南:(三、性能篇) 2015/06/29 · HTML5 · 2评论 · Chrome 原文出处: 卖烧烤夫斯基     卤煮在前面已经向大家介绍了Chrome开发者工具