常问的this,真的了解?
2017-10-31 本文已影响16人
饥人谷_米弥轮
this
的作用
- 当对象没有声明,或者不清楚其变量时,想要调用它,就会使用到
this
对象- 案例
- 遍历DOM对象,绑定事件,调用当前点击的对象的函数
- 案例
全局作用域中的this
- 全局变量和对象都在
window
对象上定义,所以所有的全局变量和对象的this
都属于window
对象
this
公理
-
this
关键字永远都指向函数(方法)的所有者<script> var name = "小明"; var job = "电焊工"; function say() { alert(this.name + "是一名" + this.job); } var it = { //name:"杰西", //job:"就职于W3Cfuns.com的前端开发工程师", say: function () { alert(this.name + "是一名" + this.job); } }; /*say(); window.say(); this.say();*/ it.say(); //window.it.say(); //this.it.say(); //console.log(window); </script>
函数被赋值于变量时的this
问题
<script type="text/javascript">
var info = ["W3Cfuns", "QQ", "Sina", "SouHu", "YouKu", "TuDou"];
var it = {
info: ["前端开发网", "腾讯", "新浪", "搜狐", "优酷", "土豆"],
getinfo: function () {
alert(this.info.join(","));
}
};
//it.getinfo();
var data = it.getinfo; //相当于将function(){}赋值给data,根据this公理,data是属于window的方法,所以this为window
data(); //this为window
var data2 = function () {
alert(this.info.join(","));
};
data2(); //data和data2原理是一样的
</script>
作为对象方法的调用时的 this
问题
<script type="text/javascript">
function test() {
alert(this.x);
}
var test = function()
{
alert(this.x);
};
test();
var o = {};
o.x = 1;
o.t = test;
o.t(); //this为o
</script>
作为构造函数调用时的this
问题
<script type="text/javascript">
var x = 2;
function test() {
this.x = 1;
}
test(); //1
alert(x); //1
var o = new test(); //当new一个构造函数时会将this指向变量
alert(o.x); //1
alert(x); //2
</script>
解决,闭包中的this
指向问题
<script type="text/javascript">
var asdfasdf = {
info: ["前端开发网", "腾讯", "新浪", "搜狐", "优酷", "土豆"],
getinfo: function () {
console.log(this);
console.log(this.info);
// var _this = this;
function abc() {
console.log(this); //window
console.log(this.info); //undefinde
// console.log(_this);
// console.log(_this.info);
};
abc(); //this指向window
}
};
asdfasdf.getinfo(); //当调用这个方法时,其实相当于把abc这个函数释放出来其所有者归属于window.abc()
/**
* ps:想让闭包函数里的this指向当前变量的方法有两种
* 1.将this替换为当前变量名,但是这种方法弊端很大,如果变量修改,全部都要进行改变
* 2.在闭包函数外层重新赋值this给一个新的变量,用这个新的变量替代闭包中的this
*/
</script>
当this
遇到一些“特殊”的函数时的问题
- call、apply、bind的运用