这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
bind 是 ES5 中新增的一个方法,可以改变函数内部的 this 指向。这篇文章小编将带领大家深入理解 Javascript 中的 Function.prototype.bind() 方法。有需要的朋友们可以参考借鉴,下面来一起看看吧。
前言
对于函数绑定 (Function binding) 很有可能是大家在使用 JavaScript 时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持 this 上下文的时候,你真正需要的其实就是
,只是你有可能仍然没有意识到这点。
- Function.prototype.bind()
第一次遇到这个问题的时候,你可能倾向于将 this 设置到一个变量上,这样你可以在改变了上下文之后继续引用到它。
一. bind 的语法
方法的主要作用就是将函数绑定至某个对象,
- bind()
方法会创建一个函数,函数体内 this 对象的值会被绑定到传入
- bind()
函数的值。
- bind()
1.1 定义
bind() 的定义如下:
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
bind() 函数会创建一个新函数(称为绑定函数),新函数与被调函数(绑定函数的目标函数)具有相同的函数体。当目标函数被调用时 this 值绑定到
的第一个参数,该参数不能被重写。
- bind()
1.2 原理
可以用如下代码模拟
的原理:
- bind()
- Function.prototype.bind = function(context) {
- var self = this; // 保存原函数
- return function() { // 返回一个新函数
- return self.apply(context, arguments); // 执行新函数时,将传入的上下文context作为新函数的this
- }
- }
1.3 语法
- Function.prototype.bind(thisArg[, arg1[, arg2[, ...]]])
二. bind 的应用场景
2.1 实现对象继承
- var A = function(name) {
- this.name = name;
- }
- var B = function() {
- A.bind(this, arguments);
- }
- B.prototype.getName = function() {
- return this.name;
- }
- var b = new B("hello");
- console.log(b.getName()); // "hello"
2.2 事件处理
- var paint = {
- color: "red",
- count: 0,
- updateCount: function() {
- this.count++;
- console.log(this.count);
- }
- };
- // 事件处理函数绑定的错误方法:
- document.querySelector('button')
- .addEventListener('click', paint.updateCount); // paint.updateCount函数的this指向变成了该DOM对象
- // 事件处理函数绑定的正确方法:
- document.querySelector('button')
- .addEventListener('click', paint.updateCount.bind(paint)); // paint.updateCount函数的this指向变成了paint
2.3 时间间隔函数
- var notify = {
- text: "Hello World!",
- beforeRender: function() {
- alert(this.text);
- },
- render: function() {
- // 错误方法:
- setTimeout(this.beforeRender, 0); // undefined
- // 正确方法:
- setTimeout(this.beforeRender.bind(this), 0); // "Hello World!"
- }
- };
- notify.render();
2.4 借用 Array 的原生方法
- var a = {};
- Array.prototype.push.bind(a, "hello", "world")();
- console.log(a); // "hello", "world"
三. bind() 方法的浏览器兼容性
四. bind() 的兼容性写法
- if (!Function.prototype.bind) {
- Function.prototype.bind = function() {
- var self = this,
- // 保存原函数
- context = [].shift.call(arguments),
- // 需要绑定的this上下文
- args = [].slice.call(arguments); // 剩余的参数转成数组
- return function() { // 返回一个新函数
- // 执行新函数时,将传入的上下文context作为新函数的this
- // 并且组合两次分别传入的参数,作为新函数的参数
- return self.apply(context, [].concat.call(args, [].slice.call(arguments)));
- }
- };
- }
五. bind 与 call/apply 方法的区别
共同点:
都可以改变函数执行的上下文环境;
不同点:
bind: 不立即执行函数,一般用在异步调用和事件; call/apply: 立即执行函数。
总结
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用 Javascript 能有一定的帮助,如果有疑问大家可以留言交流。
来源: http://www.phperz.com/article/17/0708/331296.html