您的位置：首页 > Web前端 > JavaScript

JavaScript this的总结

2018-01-05 17:54 113 查看

参考文档：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this

由于项目组缺少前端，鄙人从后端派到了前端，一周后开始开发，前端0基础，亚历山大。

折腾了一上午，算是理解JavaScript恐怖的this了。

结合参考文档，this的所有使用情况应该主要有如下这么多了吧：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this</title>
</head>
<body>
<table>
<tr>
<th>描述</th>
<th>代码</th>
<th>结果</th>
</tr>
<tr>
<td>this指代全局上下文</td>
<td>this.a</td>
<td id="1"></td>
</tr>
<tr>
<td>this在函数中取决于调用者</td>
<td>function user()</td>
<td id="2"></td>
</tr>
<tr>
<td>bind</td>
<td>user.bind({name:'bind'})</td>
<td id="3"></td>
</tr>
<tr>
<td>箭头函数</td>
<td>var foo = (()=>this);<br>
var fooBind = foo.bind({});
</td>
<td id="4"></td>
</tr>
<tr>
<td>对象的方法1</td>
<td>var o = {
prop: 37,
f: function() {
return this.prop;
}
};
</td>
<td id="5"></td>
</tr>
<tr>
<td>对象的方法2</td>
<td>var o = {prop: 37};
function independent() {
return this.prop;
}
o.f = independent;
</td>
<td id="6"></td>
</tr>
<tr>
<td>对象的方法3</td>
<td>var o = {
f : function(){
return this.prop;
}
};
var p = Object.create(o);
</td>
<td id="7"></td>
</tr>
<tr>
<td>构造函数</td>
<td>function C(){
this.a = 37;
}
var o = new C();
</td>
<td id="8"></td>
</tr>
<tr>
<td>DOM事件函数</td>
<td>bluify(e)
</td>
<td id="9">颜色</td>
</tr>
<tr>
<td>内联事件处理</td>
<td>onclick="alert(this.tagName.toLowerCase())</td>
<td><button onclick="alert(this.tagName.toLowerCase());">
Show this
</button></td>
</tr>
</table>
<script>
a = 37;
</script>
<script>
document.getElementById("1").innerText = this.a;
var name = "windows";

function user() {
return this.name;
}

document.getElementById("2").innerText = user();
console.log(document.getElementById("2").innerText);
var obj = {name: 'obj'};
console.log(user.apply({name: 'fuck'}));
document.getElementById("2").innerText = user.call(obj)

var bind = user.bind({name: 'bind'});
document.getElementById("3").innerText = bind();

var foo = (() => this);
var fooBind = foo.bind({});
document.getElementById("4").innerText = fooBind() === this;

var o1 = {
prop: 37,
f: function () {
return this.prop;
}
};
document.getElementById("5").innerText = o1.f();

var o2 = {prop: 37};
function independent() {
return this.prop;
}
o2.f = independent;
document.getElementById("6").innerText = o2.f()

var o3 = {
f:function () {
return this.prop;
}
}
var oo3 = Object.create(o3);
oo3.prop = 37;
document.getElementById("7").innerText = oo3.f();

function C() {
this.a = 100;
return {a:this.a+100};
}
var o4 = new C();
document.getElementById("8").innerText = o4.a;
console.log(a);

// 被调用时，将关联的元素变成蓝色
function bluify(e){
console.log(this === e.currentTarget); // 总是 true
// 当 currentTarget 和 target 是同一个对象时为 true
console.log(this === e.target);
this.style.backgroundColor = '#A589F3';
}
document.getElementById("9").addEventListener('click',bluify,false);
</script>
</body>
</html>

个人理解总结：

this 默认是当前对象，当前对象没有指定，默认是全局的windows对象

函数可以通过call、apply来修改本次执行的this对象

函数可以通过bind来永久修改执行的this对象

var o = new func()构建的对象,func()中的this为o

addEventListener(‘click’,fun(),false),fun()中的this则为事件对象的target

当代码被内联on-event 处理函数调用时，它的this指向监听器所在的DOM元素

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航