简明扼要javascript中this指向。

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hongyu_lin/article/details/78811600

概述

关于this指向,有个误区就是“this”指向调用的函数。其实不然,提到this指向,需要详细讲到apply,call,bind,new等方法以及箭头函数,点运算符。

一、独立调用
在独立调用的时候,要分两种情况:严格模式和非严格模式。

  1. 非严格模式下:
    独立调用的时候this指向window(浏览器中),或者为undefined(nodejs中)。
//浏览器中
function foo(){
    let a = 2;
    console.log(this.a)
}
var a = 3;
foo()//3

//nodejs中
function foo(){
    var a = 2;
    console.log(this.a)
}
var a = 3;
foo()//undefined,此时this指向一个空对象{}
  1. 严格模式下
    在严格模式下。独立调用函数中this都为undefined.
function foo(){
    "use strict"
    let a = 2;
    console.log(this.a)
}
var a = 3;
foo()//此时this为undefined

二、点运算符
当函数被作为另外一个函数的属性调用时候,被调用函数中的this指向调用的函数。

let foo = {
    a : 2,
    fn: function(){
        console.log(this.a)
    }
}
var a  = 3;
foo.fn()//2

三、箭头函数
箭头函数比较特别,其中的this是在编译的时候确定指向的(在别的情况下this都是在执行的时候确定指向)。
在es6的箭头函数中,this会在编译的时候绑定上一层函数或全局。

function foo(){
    return (a) => {
        console.log(this.a)
    }
}
var obj1 = {
    a:1
}
var obj2 ={
    a: 2
}
//箭头函数中的this绑定到foo上。
var bar = foo.call(obj1);
bar.call(obj2)//1

四、new
在构造函数中,this会被绑定到实例中。

function foo(a){
    this.a = a
}
var bar = new foo(3)
bar.a//3

五、call、apply、bind
这三个函数都是起到函数中的this绑定到第一个参数中。

function foo(){
    console.log(this.a)
}
var obj = {
    a:1
}
foo.call(obj)//1
foo.apply(obj)//1
foo.bind(obj)()//1

至于三者之间的区别不是本文重点,所以可以简单的理解为:

bind大部分作为返回使用,call和apply则会立即执行。
apply的参数为一个数组,call的参数为一一传入的,当参数数量不定的时候使用apply。

展开阅读全文

没有更多推荐了,返回首页