JS中this的指向以及call、apply的作用
在具体的实际应用中，this 的指向无法在函数定义时确定，而是在函数执行的时候才确定的，根据执行时的环境大致可以分为以下3种：
1、当函数作为普通函数调用时，this 指向全局对象
2、当函数作为对象的方法调用时，this 指向该对象
3、当函数作为构造器调用时，this 指向新创建的对象
示例一：
window.name = 'myname';
function getName() {
console.log(this.name);
}
getName(); //输出myname
示例二：
var boy = {
name: 'Bob',
getName: function() {
console.log(this.name);
}
}
boy.getName(); //输出Bob
示例三：
function Boy(name) {
this.name = name;
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob
对于示例三，还有一种特殊情况，就是当构造函数通过 "return" 返回的是一个对象的时候，此次运算的最终结果返回的就是这个对象，而不是新创建的对象，因此 this 在这种情况下并没有什么用。
示例四：
function Boy(name) {
this.name = name;
return { //返回一个对象
name: 'Jack'
}
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Jack
示例五：
function Boy(name) {
this.name = name;
return 1; //返回非对象
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob
call 和 apply 的作用
apply 接受两个参数，第一个参数指定了函数体内 this 的指向，第二个参数是一个数组或类数组，用于传递被调用函数的参数列表。
示例一：
function getInfo() {
console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
name: 'Bob',
age: 12
}
getInfo.apply(boy1,['sing','swimming']); //输出Bob like sing and swimming
call 传入参数的数量是不固定的，跟 apply 相同的是，第一个参数也是用于指定函数体内 this 的指向，从第二个参数开始往后，每个参数被依次传入被调用函数。
示例二：
function getInfo() {
console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
name: 'Bob',
age: 12
}
getInfo.call(boy1,'sing','shopping'); //输出Bob like sing and shopping
此外，大部分高级浏览器还实现了 bind 方法，它与 call 和 apply 的区别在于 bind 只是改变函数内部 this 的指向，但不会立即执行，你需要显示调用它。
示例三：模拟浏览器的 bind 方法
Function.prototype.bind = function(obj){
var self = this;
return function(){
return self.apply(obj,arguments);
}
};
var obj = {
name: 'Bob',
age: 12
};
var func = function(){
console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}.bind(obj);
func('sing','shopping');
丢失的 this
在某些情况下会丢失 this 的指向，此时，我们就需要借助 call、apply 和 bind 来改变 this 的指向问题。
示例一：当 "getName" 方法作为 "boy" 对象的属性调用时，this 指向 "boy" 对象，当另外一个变量引用 "getName" 方法时，因为它是作为普通函数调用，所以 this 指向全局对象window
var boy = {
name: 'Bob',
getName: function() {
console.log(this.name);
}
}
boy.getName(); //输出Bob
var getBoyName = boy.getName;
getBoyName(); //输出undefined
示例二：即使在函数内部定义的函数，如果它作为普通对象调用，this 同样指向 window 对象
var boy1 = {
name: 'Bob',
age: 12,
getInfo: function() {
console.log(this.name);
function getAge() {
console.log(this.age);
}
getAge();
}
}
boy1.getInfo(); //Bob
//undefined
相关文章
javascript学习笔记(三) String 字符串类型介绍
javascript学习笔记之String 字符串类型介绍，这里介绍的是js字符串处理常用函数2012-06-06
js代码运行不出来的情况在项目中经常发生，究竟是什么原因呢？在本文整理了一些常见的情况，感兴趣的各位朋友可以参考下2013-10-10
Javascript算符的优先级介绍，需要的朋友可以参考一下2013-03-03
这篇文章主要简单介绍了JavaScript函数节流的相关知识，有相同需求的小伙伴们可以仔细阅读下2014-12-12
JavaScript 字符串拼接的一些知识点分析，对于提高效率等，都是非常值得一看的。2010-03-03
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
javascript窗口宽高,鼠标位置,滚动高度(详细解析)。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
用meta实现的页面跳转代码,建议与js一起使用，防止页面假死或不支持js的情况，都可以实现效果。2007-09-09
JS方法调用括号的问题很是令人头疼，下面有个不错的示例，感兴趣的朋友可以参考下2014-01-01
这篇文章主要介绍了DOM基础教程之事件对象的相关资料,需要的朋友可以参考下2015-01-01
JS Timing...2007-04-04
最新评论