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

关于JavaScript中this的指向问题

2018-01-03 20:30 801 查看

学习中，有问题可以一起改正哦

JavaScript函数中的this指向问题，this出现的几大场景

1.函数中的this

function fn (){
console.log(this);
}
fn();//输出window

从代码运行结果来看普通函数中的this是指向window的，window为浏览器顶级对象，当fn()调用时其实是省略了window的，写成window.fn()也是可以输出的。

2.对象中的this

var obj = {
name: 'zs',
fn : function (){console.log(this)}
}
obj.fn();

输出结果：Object 即obj，说明对象中的this是指向当前对象的

3.构造函数中的this

function FucName() {
this.name = 123;
this.fn = function() {
console.log(this);
}
}
//实例化一个FucName对象，保存在变量名为obj的内存中
var obj1 = new FucName();
//修改obj中FucName对象的name属性
obj.name = 'zs'
obj.fn()//输出FucName对象

这里输出的FuncName并不是指的构造函数，而是一种对象名，类似于Array，Array属于Object但自己的方法和属性，var arr = new Array(); arr 就拥有Array中的属性和方法，控制台打印arr输出的就是Array[]对象，所以这里打印的obj实际上是变量名为obj的变量保存的FucName对象，和构造函数FucName没有关系，即使你修改了obj中保存的对象的属性和方法对构造函数也不会有影响，这一点我也纠结了很久，最后总结就是，构造函数中的this指向的是构造函数new
出来的对象

4.事件绑定中的this

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 50px;
height: 50px;
background: blue;
color: #fff;
}
</style>
</head>
<body>
<div id="js_btn">点击</div>
<script>
var btn = document.getElementById('js_btn');
btn.onclick = function(){
this.style.backgroundColor = 'red';
console.log(this);
}
</script>
</body>

</html>

从代码运行结果中看，在点击事件中this指向触发事件的事件源。

5.定时器中的this

var btn = document.getElementById('js_btn');
var i = 0;
var time = setInterval(function () {
console.log(this);//输出Window
btn.innerHTML = i;
i++;
}, 1000);
setTimeout('clearInterval(time)' ,10000)

定时器中的this指向window，和普通函数类似，定时器的调用也是window触发，一定时间间隔执行定时器中的代码，控制DOM对象

6.几种改变this指向的方法：bind()、 call()、apply()

bind()方法：
函数名.bind(将this指向写在这里的函数,[{]代替this的函数中的参数])

bind方法返回的是一个新的函数,需要重新调用

function father (x) {
var x = x;
console.log(this);
console.log(x);
}
function son (){}
var newFather = father.bind(son , 10);
newFather();

call()方法：
借用其他函数的方法
函数名.call(将this指向写在这里的函数,参数一参数二)
A.call(B)也可以理解为B.A(),B对象调用A方法

function father (x) {
var x = x;
console.log(this);
console.log(x);
}
function son (){}
father.call(son , 10);

call()方法和bind()方法的不同之处在于call方法直接调用了函数,而bind方法创建了新的函数需要重新调用

apply()方法：
类似于call()方法，不同之处在于apply()方法参数是以数组形式传递，将数组中的每一项拆分，一项一项传递到函数中，执行函数中的代码

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

标签： javascript 函数

相关文章推荐

新的分享

章节导航