JS的this指向问题(史上最全)

Posted BlueSeaYo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS的this指向问题(史上最全)相关的知识,希望对你有一定的参考价值。

一句话概括this指向:谁调用this就指向谁

这句话可能太过广义,那么请看以下的各种this指向场景

1.箭头函数(=>)

        箭头函数this的指向不会发生改变,也就是说在创建箭头函数时就已经确定了它的this的指向了;它的指向永远指向箭头函数外层的 this。

        function fn1() 
            console.log(this);

            let fn2 = () => 
                console.log(this);
            
            fn2(); //this->window
        
        fn1();//this->window

//因为fn1函数中this的指向是window,所以fn2箭头函数this指向fn1函数也就是间接指向window

2.直接调用

在函数被直接调用时,this 将指向全局对象。在浏览器环境中全局对象是 Window,在 Node.js 环境中是 Global。

全局作用域中:this永远指向window

函数作用域中:

  • 如果函数直接被调用  this指向window  函数名()       
  • 被对象的对象.属性()调用  函数中的this指向这个对象 

        var obj = 

            fn: function fn1() 
                console.log(this);
            ,
        
        obj.fn(); //this->obj

3.对象.属性()调用

        这里说的this指向就是上文中代码中的例子,有兴趣可以自行多尝试一下此场景中的this

4.new

        当使用 new 关键字调用函数时,函数中的 this 一定是 JS 创建的新对象。

可能你会有所疑问:“如果使用 new 关键调用箭头函数,是不是箭头函数的 this 就会被修改呢?”。

我们可以在控制台尝试一下:

fun = () => 
new fun() // throw error

从控制台中可以看出,箭头函数不能当做构造函数,所以不能与 new 一起执行。

5.bind

        bind 是指 Function.prototype.bind()->原型里的方法

多次 bind 时只认第一次 bind 的值

例子:

function fn() 
  console.log(this)


fn.bind(1).bind(2)() // 1

注意:箭头函数中 this 不会被修改

fun = () => 
  // 这里 this 指向取决于外层 this
  console.log(this)


fun.bind(1)() // Window

bind 与 new

        注意:new优先

function func() 
  console.log(this, this.__proto__ === func.prototype)


boundFunc = func.bind(1)
new boundFunc() // Object true

bind 函数中 this 不会被修改

function func() 
  console.log(this)


boundFunc = func.bind(1)
boundFunc.apply(2) // 1 bind优先

总结:将参数一一进行传递,在被函数调用时不会立马执行函数,返回有一个新函数,新函数中的this指向改变,不影响原来的函数的this指向

6.apply 和 call

        作用:改变this指向

        区别:调用时传递参数形式不同

  • call:将参数一一进行传递(改变函数中的this指向 指向第一个参数;并且执行函数)
  • apply:将参数用数组的形式传递(改变函数中的this指向 指向第一个参数;并且执行函数)

使用:

        

function Person(name,age)
	this.name = name;
	this.age = age;

var person = new Person("xiaoming",100);
var obj = 
Person.apply(obj,['xiaoming',300]);//Person name: 'xiaoming', age: 100;
Person.call(obj,'xiaozhang',300);//Person name: 'xiaoming', age: 100;
console.log(person)

箭头函数中 this 不会被修改

func = () => 
  // 这里 this 指向取决于外层 this
  console.log(this)


func.apply(1) // Window

7.不在函数里        

        不在函数中的场景,可分为浏览器的 <script /> 标签里,或 Node.js 的模块文件里。

  1. 在 <script /> 标签里,this 指向 Window。
  2. 在 Node.js 的模块文件里,this 指向 Module 的默认导出对象,也就是 module.exports

非严格模式

严格模式是在 ES5 提出的。在 ES5 规范之前,也就是非严格模式下,this 不能是 undefined 或 null。所以在非严格模式下,通过上文各种场景得知,如果得出 this 指向是 undefined 或 null,那么 this 会指向全局对象。在浏览器环境中全局对象是 Window,在 Node.js 环境中是 Global。

        非严格模式代码我就不运行了结果了,感兴趣的朋友可以自行复制打印在控制台看看运行结果~~~

function fn() 
  console.log("function fn:", this)
  ;(() => 
    console.log("arrow function: ", this)
  )()


fn()

fn.bind(null)()

fn.bind(undefined)()

fn.bind().bind(2)()

fn.apply()

全文总结:谁调用this就指向谁!

以上是关于JS的this指向问题(史上最全)的主要内容,如果未能解决你的问题,请参考以下文章

史上最全的node.js中文学习资料整理!

史上最全的 UIWebview 的 JS 与 OC 交互

史上最全Vue2.0+Node.js+MongoDB视频集锦

35个最好用的Vue开源库(史上最全)

收藏史上最全的浏览器 CSS & JS Hack 手册

干货 | Vue相关开源项目库汇总(史上最全)