文章导航

JavaScript bind()

2018-11-12 00:07| 作者: admin| 查看: 1161| 评论: 0|来自: 蚂蚁部落

bind方法可以创建与原来函数主体完全一致的新函数。

新函数也称作绑定函数,既然被称作绑定函数,自然会向其绑定一些新内容,后面会介绍。

此方法是ES5新增。

语法结构:

[JavaScript] 纯文本查看 复制代码
fun.bind(thisArg[, arg1[, arg2[, ...]]])

参数解析:

(1).fun:源函数,新创建的绑定函数体与其完全一样。

(2).thisArg:必需,绑定函数中this将指向它。

(3).arg1-argN:可选,绑定函数预定义的参数。

特别说明:可以认为this和预定义的函数就是绑定到新函数的内容。

浏览器支持:

(1).IE9+浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).opera浏览器支持此方法。

(5).火狐浏览器支持此方法。

(6).safria浏览器支持此方法。

代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
let antzone={
  webName:"蚂蚁部落",
  age:4,
  show:function(){
    return this.webName;
  }
}
console.log(antzone.show());

调用antzone对象的show方法,打印结果是"蚂蚁部落"。

很容易理解,因为this指向对象antzone。

如果感觉通过对象调用方法比较麻烦,想将其单独拿出来调用。

代码修改如下:

[JavaScript] 纯文本查看 复制代码运行代码
let antzone={
  webName:"蚂蚁部落",
  age:4,
  show:function(){
    return this.webName;
  }
}
let show=antzone.show;
console.log(show());

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/12/000916ysp6o5xsjpuztcjb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

此时,show函数this指向window,打印结果并非预期。

通过bind方法可以解决上述问题,代码修改如下:

[JavaScript] 纯文本查看 复制代码运行代码
let antzone={
  webName:"蚂蚁部落",
  age:4,
  show:function(){
    return this.webName;
  }
}
let show=antzone.show;
let bindShow=show.bind(antzone);
console.log(bindShow());

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/12/000942ddip02u304wpzu95.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).show函数中的this原本指向window。

(2).通过bind方法会以show函数为模板创建一个绑定函数,并将此函数的this指向antzone对象。

[JavaScript] 纯文本查看 复制代码运行代码
function func(){
  return Array.prototype.slice.call(arguments);
}
let bindFunc=func.bind(window,1,2);
console.log(bindFunc(3,4))

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/12/001010r57rvfkqq504vv4k.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).bind方法可以为新创建的函数预定义参数。

(2).预定义参数的顺序排列在为新函数传递的参数之前。

(3).上述代码通过bind方法为新函数预定义两个参数1与2。

(4).为bindFunc函数传递两个参数3与4,它们排列在1与2之后。

[JavaScript] 纯文本查看 复制代码运行代码
function Antzone() {
  this.webName=arguments[0];
  this.age=arguments[1];
}
let bindAntzone=Antzone.bind({},"蚂蚁部落");
let ant=new bindAntzone(4);
console.log(ant.webName);
console.log(ant.age);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/12/001036kjq1zzkkkk7qj8vv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).新创建函数用作构造函数创建对象。

(2).bind规定的this无效,但是预定义的参数依然有效。

特别说明:实际工作中不推荐使用绑定函数用作构造函数,上面仅是介绍其中的原理。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部