前言
Javascript是一门基于对象的动态语言，也就是说，所有东西都是对象，一个很典型的例子就是函数也被视为普通的对象。Javascript可以通过一定的设计模式来实现面向对象的编程，其中this “指针”就是实现面向对象的一个很重要的特性。本文将给大家详细介绍关于Javascript中this关键字指向的相关内容，让我们先做一个小测试，如果全部答对了，恭喜你不用往下看了。
测试题目
第一题
function demo() {
var str = 'lisi';
alert(this.str);
}
window.demo(); // ??
var obj = {
str: "wangwu",say: function() {
alert(this.str);
}
}
obj.say(); // ??
var fun = obj.say;
window.fun(); // ??
第二题
(function() {
var username = 'lisi';
alert(this.username); // ??
})()
function demo() {
var username = 'wangwu';
function test() {
alert(this.username);
}
test(); // ??
}
demo();
第三题
var p = new Person();
p.say(); // ??
var p1 = new Person();
p1.say(); // ??
第四题
function demo() {
alert(this.username)
}
var obj1 = {
username: "lisi"
};
var obj2 = {
username: "wangwu"
};
demo(); // ??
demo(obj1); // ??
demo(obj2); // ??
demo.call(obj1); // ??
demo.apply(obj2); // ??
答案
@H_502_46@（往下看，下面有详细解析哦）
this
@H_502_46@一、指向调用函数的对象
function demo() {
var str = 'lisi';
//this->window
console.log(this);
alert(this.str);
}
window.demo(); // zhangsan
var obj = {
str: "wangwu",say: function() {
// this->obj
alert(this.str);
}
}
obj.say(); // wangwu
var fun = obj.say;
window.fun(); // zhangsan
二、无对象调用函数/匿名函数自调用->this指向window
// 匿名函数自执行 this->window
(function() {
var username = 'lisi';
console.log(this); // window
alert(this.username); // zhangsan
})()
function demo() {
var username = 'wangwu';
// 无主函数 this->window
function test() {
// this->window
alert(this.username);
}
test(); // zhangsan
}
demo();
三、通过new产生的对象
// 实例化出一个对象:p就具有了username属性和say方法
var p = new Person();
console.log(p); // Person对象
console.log(p.username); // zhangsan
p.say(); // 我叫zhangsan
// this->p1
var p1 = new Person();
p1.say(); // Person对象 我叫zhangsan
四、apply/call调用
首先我们来了解下apply()/call()是个什么东西呢？
apply()/call():最终是调用function，只不过内部的this指向了thisObj
注意：
1. 调用function函数，但是函数内的this指向thisObj（更改对象内部指针）
2. 如果thisObj没有传参，则默认为全局对象
3. call()/apply()联系与区别
联系：功能一样，第一个参数都是thisObj
区别：传递的参数如果比较多
call()的实参就是一一列出
apply()的实参是全部放置在第二个数组参数中
一个理解apply()/call()的实例：
// 调用函数的时候，demo.call()/demo.apply()最终调用的还是demo()
demo(); // 123
demo.call(); //123
demo.apply(); // 123
this的第四个用法实例
function demo() {
alert(this.username)
}
var obj1 = {
username: "lisi"
};
var obj2 = {
username: "wangwu"
};
// call()/apply()：打劫式的改变了this的指向
demo(); // zhangsan
demo(obj1); //zhangsan
demo(obj2); //zhangsan
demo.call(obj1); // lisi
demo.apply(obj2); // wangwu
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
