ECMAScript5(ES5)中bind方法使用小结
更新时间：2015年05月07日 08:58:52 投稿：junjie
这篇文章主要介绍了ECMAScript5(ES5)中bind方法使用小结,bind和call以及apply一样,都是可以改变上下文的this指向的,需要的朋友可以参考下
一直以来对和this有关的东西模糊不清，譬如call、apply等等。这次看到一个和bind有关的笔试题，故记此文以备忘。
bind和call以及apply一样，都是可以改变上下文的this指向的。不同的是，call和apply一样，直接引用在方法上，而bind绑定this后返回一个方法，但内部核心还是apply。
直接看例子：
复制代码 代码如下:
var obj = {
a: 1,
b: 2,
getCount: function(c, d) {
return this.a + this.b + c + d;
}
};
window.a = window.b = 0;
console.log(obj.getCount(3, 4)); // 10
var func = obj.getCount;
console.log(func(3, 4)); // 7
为何会这样？因为func在上下文中的this是window！bind的存在正是为了改变this指向获取想要的值：
复制代码 代码如下:
var obj = {
a: 1,
b: 2,
getCount: function(c, d) {
return this.a + this.b + c + d;
}
};
window.a = window.b = 0;
var func = obj.getCount.bind(obj);
console.log(func(3, 4)); // 10
bind是function的一个函数扩展方法，bind以后代码重新绑定了func内部的this指向（obj），但是不兼容ie6~8，兼容代码如下：
复制代码 代码如下:
var obj = {
a: 1,
b: 2,
getCount: function(c, d) {
return this.a + this.b + c + d;
}
};
Function.prototype.bind = Function.prototype.bind || function(context) {
var that = this;
return function() {
// console.log(arguments); // console [3,4] if ie<6-8>
return that.apply(context, arguments);
}
}
window.a = window.b = 0;
var func = obj.getCount.bind(obj);
console.log(func(3, 4)); // 10
其实在我看来bind的核心是返回一个未执行的方法，如果直接使用apply或者call：
复制代码 代码如下:
var ans = obj.getCount.apply(obj, [3, 4]);
console.log(ans); // 10
无法使用简写的func函数构造，所以用bind传递this指向，再返回一个未执行的方法，实现方式相当巧妙。
相关文章
这篇文章介绍了JavaScript操作Cookie的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
下面小编就为大家带来一篇浅谈Web页面向后台提交数据的方式和选择。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
使用Java实现简单的server/client回显功能的方法介绍
本篇文章介绍了，使用Java实现简单的server/client回显功能的方法。需要的朋友参考下2013-05-05
本文给大家详细介绍了JavaScript正则表达式的分组匹配的概念以及具体的使用方法并附上了相关示例，有需要的小伙伴可以参考下。2016-02-02
JS排序方法（sort，bubble，select，insert）代码汇总
新技术一直在不断变化，掌握一些基础是未来学习不断更新的技术的坚实基础。近来闲来无事,为了温习一下从前学的数据结构，将数据结构中的排序算法用JS实现了一遍，2016-01-01
关于uni-app页面Page和组件Component生命周期执行的先后顺序
这篇文章主要介绍了关于uni-app页面Page和组件Component生命周期执行的先后顺序,文中提供了具体的代码,还不清楚的朋友可以来学习一下2023-04-04
ES6标准出炉之前，一个幽灵，回调的幽灵，游荡在JavaScript世界。正所谓世界本没有回调，写的人多了也就有了。接下来就来简单介绍Javascript ES6中的原生Promise，有需要的可以参考借鉴。2016-08-08
需要注意的是js的时间戳是13位，php的时间戳是10位,转换函数如下，感兴趣的朋友可以参考下哈2013-04-04
JavaScript中使用指数方法Math.exp()的简介
这篇文章主要介绍了JavaScript中使用指数方法Math.exp(),是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
在Javascript学习笔记5 类和对象中，我简单地提到了利用JSON去构造一个对象。2010-01-01
最新评论