this指向的总结（面试）

目录

 

this指向的总结

1.全局作用域或者普通函数中this指向全局对象window（注意：定时器里面的this指向window）

2.方法调用中谁调用this指向谁

3..构造函数中this指向构造函数的实例

4. apply 、 call 和 bind 调用模式

改变函数内部 this 指向

1.call()方法

2. apply 方法

3. bind （）方法

5. 箭头函数的this指向哪⾥？

原型的this的指向

---

this指向的总结

this的指向在函数的定义的时候是确定不了的，只有在函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。

1.全局作用域或者普通函数中this指向全局对象window（注意：定时器里面的this指向window）

// this 指向问题 一般情况下this的最终指向的是那个调用它的对象

        // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
        console.log(this);  //全局

        function fn() {
            console.log(this);  //普通函数

        }
        window.fn();
        window.setTimeout(function() {  //定时器
            console.log(this);

        }, 1000);

2.方法调用中谁调用this指向谁

      // 2. 方法调用中谁调用this指向谁
        var o = {
            sayHi: function() {
                console.log(this); // this指向的是 o 这个对象

            }
        }
        o.sayHi();
        var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     console.log(this); // this指向的是btn这个按钮对象

        // }
        btn.addEventListener('click', function() {
                console.log(this); // this指向的是btn这个按钮对象

            })

3..构造函数中this指向构造函数的实例

     // 3. 构造函数中this指向构造函数的实例
        function Fun() {
            console.log(this); // this 指向的是fun 实例对象

        }
        var fun = new Fun();

4. apply 、 call 和 bind 调用模式

改变函数内部 this 指向

JavaScript 为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部 this 的指向问题，常用的有 bind()、
call()、apply() 三种方法。

1.call()方法

call() 方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的 this 指向

语法:

fun.call(thisArg, arg1, arg2, ...)

 thisArg：在 fun 函数运行时指定的 this 值
 arg1，arg2：传递的其他参数
 返回值就是函数的返回值，因为它就是调用函数
 因此当我们想改变 this 指向，同时想调用这个函数的时候，可以使用 call，比如继承
代码展示：

 var o = {
            name: 'andy'
        }

        function fn(a, b) {
            console.log(this);  //这里的this指向的是object
            console.log(a + b);  //输出3

        };
        fn.call(o, 1, 2);  //调用了fn函数，参数1改变了指向，参数2，3传入了值.

     call 的主要作用可以实现继承

   function Father(uname, age, sex) {
            this.uname = uname;
            this.age = age;
            this.sex = sex;
        }

        function Son(uname, age, sex) {
            Father.call(this, uname, age, sex);
        }
        var son = new Son('刘德华', 18, '男');
        console.log(son);

2. apply 方法

apply() 方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。

fun.apply(thisArg, [argsArray])

 thisArg：在fun函数运行时指定的 this 值
 argsArray：传递的值，必须包含在数组里面
 返回值就是函数的返回值，因为它就是调用函数
 因此 apply 主要跟数组有关系，比如使用 Math.max() 求数组的最大值

// apply()  应用 运用的意思
        var o = {
            name: 'andy'
        };

        function fn(arr) {
            console.log(this);
            console.log(arr); // 'pink'

        };
        fn.apply(o, ['pink']);
        // 1. 也是调用函数 第二个可以改变函数内部的this指向
        // 2. 但是他的参数必须是数组(伪数组)

 apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值 ---- Math.max();

 var arr = [1, 66, 3, 99, 4];
        var arr1 = ['red', 'pink'];
     
        var max = Math.max.apply(Math, arr);
        var min = Math.min.apply(Math, arr);
        console.log(max, min);

3. bind （）方法

bind() 方法不会调用函数。但是能改变函数内部this 指向

fun.bind(thisArg, arg1, arg2, ...)

 thisArg：在 fun 函数运行时指定的 this 值
 arg1，arg2：传递的其他参数
 返回由指定的 this 值和初始化参数改造的原函数拷贝
 因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind

代码展示：

    // 3. bind()  绑定 捆绑的意思
        var o = {
            name: 'andy'
        };

        function fn(a, b) {
            console.log(this);
            console.log(a + b);


        };
        var f = fn.bind(o, 1, 2);
        f();
        // 1. 不会调用原来的函数   可以改变原来函数内部的this 指向
        // 2. 返回的是原函数改变this之后产生的新函数
        // 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind

bind（）的应用：

  // 4. 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮
        var btn1 = document.querySelector('button');
        btn1.onclick = function() {
            this.disabled = true; // 这个this 指向的是 btn 这个按钮
            // var that = this;
            setTimeout(function() {
                // that.disabled = false; // 定时器函数里面的this 指向的是window
                this.disabled = false; // 此时定时器函数里面的this 指向的是btn
            }.bind(this), 3000); // 这个this 指向的是btn 这个对象
        }
        

4. call apply bind 总结
区别点:
1. call 和 apply 会调用函数, 并且改变函数内部this指向.
2. call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2..形式 apply 必须数组形式[arg]
3. bind 不会调用函数, 可以改变函数内部this指向.
主要应用场景:
1. call 经常做继承.
2. apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
3. bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.

补充：这四种方式，使用构造器调用模式的优先级最高，然后是 apply、call 和 bind 调用模式，然后是方法调用模式，然后是函数调用模式。

5. 箭头函数的this指向哪⾥？

箭头函数不同于传统JavaScript中的函数，箭头函数并没有属于⾃⼰的this，它所谓的this是捕获其所在上下⽂的 this 值，作为⾃⼰的 this 值，并且由于没有属于⾃⼰的this，所以是不会被new调⽤的，这个所谓的this也不会被改变。

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。

// 箭头函数是用来简化函数定义语法的

        // const fn = () => {

        //  console.log(123)

        // }

        // fn();

        

        // 在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略

        // const sum = (n1, n2) => n1 + n2;  

        // const result = sum(10, 20);

        // console.log(result)

        

        // 在箭头函数中 如果形参只有一个 形参外侧的小括号也是可以省略的

        // const fn = v => {

        //  alert(v);

        // }

        // fn(20)

       

        // 箭头函数不绑定this 箭头函数没有自己的this关键字 

        // 如果在箭头函数中使用this, this关键字将指向箭头函数定义位置中的this

代码展示：

function fn () {
			console.log(this); //obj
			return () => {
				console.log(this) //obj
			}
		}

		const obj = {name: 'zhangsan'}; 

		const resFn = fn.call(obj); //改变this--分析：fn本应该指向的是window --然后改变了执行 箭头函数才执行obj

		resFn();

衍生面试题：

	var age = 100;

		var obj = {
			age: 20,
			say: () => {
				alert(this.age)   //相对于一个独立函数 this执行window。输出100
			}
		}

		obj.say();

原型的this的指向

构造函数中的this 指向我们实例对象.
原型对象里面放的是方法, 这个方法里面的this 指向的是 这个方法的调用者, 也就是这个实例对象.