js---this指向问题
Posted lijing0302
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js---this指向问题相关的知识,希望对你有一定的参考价值。
1、普通函数调用
普通函数的this指向window
1 function fun() {
2 console.log(\'普通函数的this\' + this);
3 }
4 fun();
2、构造函数调用
构造函数this指向ldh这个实例对象,原型对象里面的this指向的也是ldh这个对象
1 function Star() {};
2 Star.prototype.sing = function() {};
3 var ldh = new Star();
3、对象的方法调用
对象的方法的this指向的是对象o
1 var o = {
2 sayHi: function() {
3 console.log(\'对象方法的this\' + this);
4 }
5 }
6 o.sayHi();
4、事件绑定方法
绑定事件函数this指向的是函数的调用者btn这个按钮对象
1 var btn = document.querySelector(\'button\');
2 btn.onclick = function() {
3 console.log(\'绑定事件函数的this\' + this);
4
5 }
5、定时器函数
定时器函数this指向的是window
1 setTimeout(function() {
2 console.log(\'定时器函数的this\' + this);
3 }, 1000);
6、立即执行函数
立即执行函数this指向的是window
1 (function(){
2 console.log(\'立即执行函数的this\'+this);
3 })();
二、改变函数内部的this指向的三种方法
1、call方法
call()方法可以调用函数,还可以改变函数内的this指向,它的主要作用是可以实现继承
fun.call(thisArg,arg1,arg2,....)
这里将fun函数的this指向o
1 var o = {
2 name: \'Andy\'
3 }
4
5 function fun(a, b) {
6 console.log(this);
7 console.log(a + b);
8 }
9 fun.call(o, 1, 2);
将父构造函数里的this指向子构造函数的实例对象(构造函数的this指向它的实例对象)
1 function Father(uname, age, sex) {
2 this.uname = uname;
3 this.age = age;
4 this.sex = sex;
5 }
6
7 function Son(uname, age, sex) {
8 Father.call(this, uname, age, sex);
9 }
10 var son = new Son(\'ldh\', 18, \'male\');
11 console.log(son);
2、apply方法
fun.apply(thisArg,[argsArray])(传递的值必须包含在数组里)
apply()方法可以调用函数,还可以改变函数内的this指向,但它的参数必须是数组(伪数组)
1 var arr = [1, 33, 22, 44, 12];
2 var max = Math.max.apply(Math, arr);
3 var min = Math.min.apply(Math, arr);
4 console.log(max, min);
3、bind方法(用的最多)
bind()方法不会调用函数,但是可以改变函数内部this指向
fun.bind(thisArg,arg1,arg2,....)
1 var o = {
2 name: \'Andy\'
3 }
4
5 function fun(a, b) {
6 console.log(this);
7 console.log(a + b);
8 }
9 var f = fun.bind(o, 1, 2);
10 f();
下面的小案例是点击按钮后按钮禁用,直到三秒后开启按钮虽然定时器函数里的this指向window,但是bind(this)里面的this是在定时器函数的外面绑定的,这个this又在btns[i].onclick这个函数里面,所以这个this指向的就是btns对象为什么这里的this.disabled的this不用btns[i]呢,因为定时器是在3秒后执行,而for循环立马执行,这里有三个按钮,则i为3
1 var btns = document.querySelectorAll(\'button\');
2 for (var i = 0; i < btns.length; i++) {
3 btns[i].onclick = function() {
4 this.disabled = true;
5 setTimeout(function() {
6 this.disabled = false;
7 }.bind(this), 3000);
8 }
9 }
3、call、apply、bind总结
相同点:都可以改变函数内部的this指向
区别:
1.call和apply会调用函数,并且改变函数内部的this指向
2.call和apply传递的参数不一样,apply必须以数组形式
3.bind不会调用函数,但是会改变函数内部的this指向
主要应用场景:
1.call主要用作继承
2.apply经常跟数组有关,比如借助数学对象实现数组中的最大最小值
3.bind可用于改变定时器内部的this指向
以上是关于js---this指向问题的主要内容,如果未能解决你的问题,请参考以下文章