您的位置：首页 > 移动开发

JavaScript（ES3）中的方法， 及bind apply call的使用

2017-12-11 16:57 791 查看
转：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345005399057070809cfaa347dfb7207900cfd116fb000

转：https://www.cnblogs.com/pssp/p/5215621.html

今天看了js对象的方法，把这两篇文章放到一起，用来理解bind apply和call。

问题的主要原因是js改变了对象的方法中this的指向。

如果想用变量保存方法，就需要用bind apply和call改变this的指向。

JavaScript（es3）中的方法

在一个对象中绑定函数，称为这个对象的方法。

在JavaScript中，对象的定义是这样的：

var xiaoming = {
name: '小明',
birth: 1990
};

但是，如果我们给
xiaoming
绑定一个函数，就可以做更多的事情。比如，写个
age()
方法，返回
xiaoming
的年龄：

var xiaoming = {
name: '小明',
birth: 1990,
age: function () {
var y = new Date().getFullYear();
return y - this.birth;
}
};

xiaoming.age; // function xiaoming.age()
xiaoming.age(); // 今年调用是25,明年调用就变成26了

绑定到对象上的函数称为方法，和普通函数也没啥区别，但是它在内部使用了一个
this
关键字，这个东东是什么？

在一个方法内部，
this
是一个特殊变量，它始终指向当前对象，也就是
xiaoming
这个变量。所以，
this.birth
可以拿到
xiaoming
的
birth
属性。

让我们拆开写：

function getAge() {
var y = new Date().getFullYear();
return y - this.birth;
}

var xiaoming = {
name: '小明',
birth: 1990,
age: getAge
};

xiaoming.age(); // 25, 正常结果
getAge(); // NaN

单独调用函数
getAge()
怎么返回了
NaN
？请注意，我们已经进入到了JavaScript的一个大坑里。

JavaScript的函数内部如果调用了
this
，那么这个
this
到底指向谁？

答案是，视情况而定！

【this 的作用域 是关键问题所在】

如果以对象的方法形式调用，比如
xiaoming.age()
，该函数的
this
指向被调用的对象，也就是
xiaoming
，这是符合我们预期的。

如果单独调用函数，比如
getAge()
，此时，该函数的
this
指向全局对象，也就是
window
。

坑爹啊！

更坑爹的是，如果这么写：这样写不能拿到正确的结果

var fn = xiaoming.age; // 先拿到xiaoming的age函数
fn(); // NaN

也是不行的！要保证
this
指向正确，必须用
obj.xxx()
的形式调用！

由于这是一个巨大的设计错误，要想纠正可没那么简单。ECMA决定，在strict模式下让函数的
this
指向
undefined
，因此，在strict模式下，你会得到一个错误：

'use strict';

var xiaoming = {
name: '小明',
birth: 1990,
age: function () {
var y = new Date().getFullYear();
return y - this.birth;
}
};

var fn = xiaoming.age;
fn(); // Uncaught TypeError: Cannot read property 'birth' of undefined

这个决定只是让错误及时暴露出来，并没有解决
this
应该指向的正确位置。

有些时候，喜欢重构的你把方法重构了一下：

'use strict';

var xiaoming = {
name: '小明',
birth: 1990,
age: function () {
function getAgeFromBirth() {
var y = new Date().getFullYear();
return y - this.birth;
}
return getAgeFromBirth();
}
};

xiaoming.age(); // Uncaught TypeError: Cannot read property 'birth' of undefined

结果又报错了！原因是
this
指针只在
age
方法的函数内指向
xiaoming
，在函数内部定义的函数，
this
又指向
undefined
了！（在非strict模式下，它重新指向全局对象
window
！）

修复的办法也不是没有，我们用一个
that
变量首先捕获
this
：

'use strict';

var xiaoming = {
name: '小明',
birth: 1990,
age: function () {
var that = this; // 在方法内部一开始就捕获this
function getAgeFromBirth() {
var y = new Date().getFullYear();
return y - that.birth; // 用that而不是this
}
return getAgeFromBirth();
}
};

xiaoming.age(); // 25

用
var that = this;
，你就可以放心地在方法内部定义其他函数，而不是把所有语句都堆到一个方法中。

/*********************************************************************************************************/

why？call,apply,bind干什么的？为什么要学这个？一般用来指定this的环境，在没有学之前，通常会有这些问题。

　

var a = {
user:"追梦子",
fn:function(){
console.log(this.user);
}
}
var b = a.fn;
b(); //undefined


我们是想打印对象a里面的user却打印出来undefined是怎么回事呢？如果我们直接执行a.fn()是可以的。

var a = {
user:"追梦子",
fn:function(){
console.log(this.user);
}
}
a.fn(); //追梦子


虽然这种方法可以达到我们的目的，但是有时候我们不得不将这个对象保存到另外的一个变量中（如上面红字的问题），那么就可以通过以下方法。

1、call()

　　

var a = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
var b = a.fn;
b.call(a);


通过在call方法，给第一个参数添加要把b添加到哪个环境中，简单来说，this就会指向那个对象。

call方法除了第一个参数以外还可以添加多个参数，如下：

var a = {
user:"追梦子",
fn:function(e,ee){
console.log(this.user); //追梦子
console.log(e+ee); //3
}
}
var b = a.fn;
b.call(a,1,2);


2、apply()

apply方法和call方法有些相似，它也可以改变this的指向

var a = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
var b = a.fn;
b.apply(a);


同样apply也可以有多个参数，但是不同的是，第二个参数必须是一个数组，如下：

var a = {
user:"追梦子",
fn:function(e,ee){
console.log(this.user); //追梦子
console.log(e+ee); //11
}
}
var b = a.fn;
b.apply(a,[10,1]);


或者

var a = {
user:"追梦子",
fn:function(e,ee){
console.log(this.user); //追梦子
console.log(e+ee); //520
}
}
var b = a.fn;
var arr = [500,20];
b.apply(a,arr);


//注意如果call和apply的第一个参数写的是null，那么this指向的是window对象

var a = {
user:"追梦子",
fn:function(){
console.log(this); //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…}
}
}
var b = a.fn;
b.apply(null);


3、bind()

bind方法和call、apply方法有些不同，但是不管怎么说它们都可以用来改变this的指向。

先来说说它们的不同吧。

var a = {
user:"追梦子",
fn:function(){
console.log(this.user);
}
}
var b = a.fn;
b.bind(a);


我们发现代码没有被打印，对，这就是bind和call、apply方法的不同，实际上bind方法返回的是一个修改过后的函数。

var a = {
user:"追梦子",
fn:function(){
console.log(this.user);
}
}
var b = a.fn;
var c = b.bind(a);
console.log(c); //function() { [native code] }


那么我们现在执行一下函数c看看，能不能打印出对象a里面的user

var a = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
var b = a.fn;
var c = b.bind(a);
c();


ok，同样bind也可以有多个参数，并且参数可以执行的时候再次添加，但是要注意的是，参数是按照形参的顺序进行的。

var a = {
user:"追梦子",
fn:function(e,d,f){
console.log(this.user); //追梦子
console.log(e,d,f); //10 1 2
}
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);


总结：call和apply都是改变上下文中的this并立即执行这个函数，bind方法可以让对应的函数想什么时候调就什么时候调用，并且可以将参数在执行的时候添加，这是它们的区别，根据自己的实际情况来选择使用。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航