this指向及改变this指向的方法

原先总结过this指向问题，但看了大佬们写的之后，觉得自己遗漏了很多点，所以，结合大佬们的，重写一遍

一、函数的调用方式决定了 this 的指向不同：

1.普通函数调用，此时 this 指向 window

    function fn() {console.log(this);   // window}fn();  //  window.fn（),此处默认省略window

2.构造函数调用，此时 this 指向实例对象

 function Person(age, name) {this.age = age;this.name = nameconsole.log(this)  // 此处 this 分别指向 Person 的实例对象 p1 p2}var p1 = new Person(18, 'zs')var p2 = new Person(18, 'ww')

3.对象方法调用，此时 this 指向该方法所属的对象

 var obj = {fn: function () {console.log(this); // obj}}obj.fn();

4.通过事件绑定的方法，此时 this 指向绑定事件的对象

<body><button id="btn">hh</button>
<script>var oBtn = document.getElementById("btn");oBtn.onclick = function() {console.log(this); // btn}
</script>
</body>

5.定时器函数，此时 this 指向 window

 setInterval(function () {console.log(this); // window}, 1000);

二、更改this指向的三个方法

1.call() 方法

 var Person = {name:"lixue",age:21}function fn(x,y){console.log(x+","+y);console.log(this);}fn("hh",20);

没错，就像上面说的，普通函数的this指向window，现在让我们更改this指向

 var Person = {name:"lixue",age:21}function fn(x,y){console.log(x+","+y);console.log(this);console.log(this.name);console.log(this.age);}fn.call(Person,"hh",20);

看，现在this就指向person了

2.apply() 方法

apply() 与call（）非常相似，不同之处在于提供参数的方式，apply（）使用参数数组，而不是参数列表

3.bind()方法

bind()创建的是一个新的函数（称为绑定函数），与被调用函数有相同的函数体，当目标函数被调用时this的值绑定到 bind()的第一个参数上

三、改变this指向的例子

 var oDiv1 = document.getElementById("div1");oDiv1.onclick = function(){setTimeout(function(){console.log(this);},1000)}

没错，就像上面所说，定时器里的this指向window，那么怎么改成指向div呢

 var oDiv1 = document.getElementById("div1");oDiv1.onclick = function(){setTimeout(function(){console.log(this);}.bind(this),1000)}

因为在定时器外，在绑定事件中的this肯定指向绑定事件的对象div啊，用call和apply都行

上图就是用bind改变了this指向，但改变定时器中的this指向，我们有个更好的方法

this指向及改变this指向的方法相关推荐

this指向和改变其指向的方法
this笔记(仅作为个人学习使用) 一.this 的指向在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象. 下面这个例子,这里的 a() 是被wind ...
JS中this的指向与改变this指向的三个方法
目录一.this指向的分类 1.全局函数的调用 2.对象中函数的调用 3.setTimeout与setInterval中的this 4.事件绑定中的this 5.箭头函数中的this 6.构造函数中 ...
JS篇之this指向以及如何改变this指向
this指向的几种类型 1.作为普通函数调用 this指向window var x = 1 var y = 2 function test(){var x = 2co ...
原型的指向是否可以改变原型最终指向了哪里原型指向改变如何添加方法和访问
原型的指向是否可以改变 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
ES6/03/函数的定义方式和调用方式，函数内的this指向，改变函数中this指向的三个方法(call(),apply(),bind())
函数的定义方式 1,自定义函数(命名函数) function fun(){}; 2,函数表达式(匿名函数) var fun =function(){}; 3,利用new Function( '参数1' ...
js 改变this指向的几种方法（个人学习笔记）
1.call()和apply() 两中方法都能改变this指向,很类似,区别主要是第二个以后参数, call():第一个参数表示要把this指向的新目标,第二个之后的参数其实相当于传参,参数以,隔开 ...
前端改变this指向的方法有哪些？如何判断this指向？
bind.call.apply.箭头函数.new.这些都可以改变this指向,他们之间的区别是 1.call 和 apply 的this指向 call 和 apply其实是一样的,区别在于传参的时候参 ...
javaScript改变this指向的三种方法
javaScript提供了一些函数方法帮助我们处理函数内部this的指向问题,常用的有bind().call().apply()三种方法 1.call() 方法调用一个对象.简单理解为调用函数的方式, ...
JavaScript基础--改变this指向的方法
1. this指向 this随处可见,一般谁调用,this就指向谁.this在不同环境下,不同作用下,表现的也不同. 以下几种情况,this都是指向window的: ① 全局作用下,this指向的是w ...