JS中this的指向

葡萄藤PPT


JS中this的指向

大家好,我是IT修真院郑州分院第6期的学员王栋,一枚正直、纯洁、善良的前端程序员今天给大家分享一下,修真院官网js任务2深度思考中的知识点——JS中this的指向

1.背景介绍

在javaScript中,this是动态绑定的,它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。

这就导致了this具备了多重含义,可以使得this可以更灵活地使用。

但是,带来了灵活性的同时也会给我们初学者带来不少困惑。

简而言之, this 是一个特殊的标识符关键字 —— 在每个 function 中自动根据作用域(scope) 确定,

指向的是此次调用的 “所有者,owner”。

2.知识剖析

在全局函数中,this就是window,当函数被作为某个对象的方法调用时,this就是那个对象,

匿名函数的执行具有全局性,也就是说,匿名函数this指向window。

this的常见的四种情形

     
  • 1.纯粹的作为函数调用:全局函数中,this指向window

  • 2.作为对象方法的调用:当函数被作为某个对象的方法调用时,this就是那个对象
  • 3.作为构造函数调用:this指向新对象
  • 4. apply、call调用:this指向改变后的调用这个函数的对象
  • 全局环境中的this

    function a(){

    console.log(this);

    }

    a();

    这里调用了a函数,而a函数的执行环境是全局环境,这里的this也就指向了全局变量window。

    严格模式 ‘use strict’下的this

    'use strict';

    function a(){

    this.user = "hello";

    console.log(this);

    console.log(this.user);

    }

    a();

    console.log(user)

    原因:严格模式下这种调用方式会报错,如果不用严格模式,可能你不知不觉中就定义了几个全局变量。

    在javaScript中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下几种方式:作为对象方法调用,作为函数调用,作为构造函数调用,和使用 apply 或 call 调用。

    1.作为对象方法调用:this指向该对象本身

    var point = {

    x : 0,

    y : 0,

    moveTo : function(x, y) {

    console.log(this);

    this.x = this.x + x;

    this.y = this.y + y;

    }

    };

    point.moveTo(1, 1);

    console.log(point.x);

    var car = {

    brand: "Nissan",

    getBrand: function(){

    console.log(this.brand);

    console.log(this);

    console.log(this===car);

    }

    };

    car.getBrand();

    var brand = 'Nissan';

    var myCar = {brand: 'Honda'};

    var getBrand = function() {

    console.log(this.brand);

    };

    myCar.getBrand = getBrand;

    myCar.getBrand();

    // output: Honda

    getBrand();

    // output: Nissan

    2.作为函数调用:this指向全局对象

    function a(x) {

    this.x = x;

    }

    a(5);

    console.log(this.x);

    console.log(x)

    console.log(window.x)

    3.作为构造函数调用:this 绑定到新创建的对象上

    function Point(){

    this.x = 1;

    }

    var a = new Point;

    console.log(a.x)

    var x = 2;

    function test(){

    this.x = 1;

    }

    var a = new test();

    console.log(a.x)

    console.log(x)

    注:构造函数不使用new调用,则和普通函数一样。一般地,构造函数首字母大写

    4.使用 apply 或 call 调用:当使用apply和call时,表示把一个函数表达式放入call或apply括号后面的第一个参数的环境中,

    this则指向这个参数;两者不同的地方在于apply第二个参数必须是个数组。简言之就是apply或者call谁,this就指向谁

    function Point(x, y){

    this.x = x;

    this.y = y;

    this.moveTo = function(x, y){

    this.x = x;

    this.y = y;

    }

    }

    var p1 = new Point(0, 0);

    console.log(p1);

    var p2 = {x: 0, y: 0};

    p1.moveTo(1, 1);

    console.log(p1);

    p1.moveTo.apply(p2, [10, 10]);

    console.log(p1);

    console.log(p2);

    3、常见问题

    var obj = {

    name: 'qiutc',

    foo: function() {

    console.log(this);

    },

    foo2: function() {

    console.log(this);

    setTimeout(this.foo, 1000);

    }

    }

    obj.foo2();

    异步回调函数中的this指向问题,现象:两次打印的this不一样

    'use strict';

    var obj = {

    name: 'qiutc',

    foo: function() {

    console.log(this);

    },

    foo2: function() {

    console.log(this);

    setTimeout(this.foo, 1000);

    }

    }

    obj.foo2();

    现象:加了严格模式,this仍然指向了window

    setTimeout()其实全名为window.setTimeout(),是window下面的一个方法,不管是否是严格模式,指向的都是window。

    4、解决方案

    1.将this赋给一个变量,然后通过闭包来访问这个变量来打印出我们想要的值。

    var obj = {

    name: 'qiutc',

    foo: function() {

    console.log(this);

    },

    foo2: function() {

    console.log(this);

    var _this = this;

    setTimeout(function() {

    console.log(this);  // Window

    console.log(_this);  // Object {name: "qiutc"}

    }, 1000);

    }

    }

    obj.foo2();

    2.使用bind()将执行环境放到obj这个对象中去,可以用this代替。

    var obj = {

    name: 'qiutc',

    foo: function() {

    console.log(this);

    },

    foo2: function()

    var _this = this;

    setTimeout(function() {

    console.log(this);  //Object {name: "qiutc"}

    }.bind(this), 1000);

    }

    }

    obj.foo2();

    3.使用ES6中的箭头函数。

    var obj = {

    name: 'qiutc',

    foo: function() {

    console.log(this);

    },

    foo2: function() {

    console.log(this);

    setTimeout(() => {

    console.log(this);  // Object {name: "qiutc"}

    }, 1000);

    }

    }

    obj.foo2();

    箭头函数中的 this 只和定义它时候的作用域的 this 有关,而与在哪里以及如何调用它无关,同时它的 this 指向是不可改变的。

    5、编码实战

    window.val = 1;

    var obj = {

    val: 2,

    dbl: function () {

    this.val *= 2;

    val *= 2;

    console.log(val);

    console.log(this.val);

    }

    };

    // 说出下面的输出结果

    obj.dbl();

    var func = obj.dbl;

    func()

    6.扩展思考

    问题:如何了解this到底指向谁?

    1.当函数作为对象的方法调用时,this指向该对象。

    2.当函数作为单独函数调用时,this指向全局对象(严格模式时,为undefined)

    3.构造函数中的this指向新创建的对象

    4.嵌套函数中的this不会继承上层函数的this,可以用前面讲过的三种方法来使this指向宿主对象。

    apply和call,bind调用或者绑定的this,指向相应的对象

    7.参考文献

    参考一:深入浅出 JavaScript 中的 this

    参考二:JavaScript 中的 this !

    参考三:JavaScript中的this用法与指向

    参考四:如何理解 JavaScript 中的 this 关键字?

    8、更多讨论

    关于this的指向问题大家还有什么好的见解?

    this指向把四种情况弄明白之后还是很简单的,尤其是闭包可能不太好理解,其实掌握之后还是很灵活的。

    问题:

    Q1:要贝贝:apply方法有什么作用?一般在什么情况下可以使用apply?

    A1:王栋:apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性.,call:和apply的意思一样,只不过是参数列表不一样.。

    在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且在调用Person的时候参数的列表是对应一致的(也就是Person和Student的参数列表前两位是一致的) 就可以采用 apply , 如果我的Person的参数列表是这样的(age,name),而Student的参数列表是(name,age,grade),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade));

    Q2:王姣妍:ES6是什么?

    A2:王栋:ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,在2015年6月正式发布。

    Q3:任先阳:bind是干什么用的?什么时候使用?

    A3:王栋:bind()最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值。场景就是在绑定函数,偏函数,settimeout等

    Q4:要贝贝:什么时候使用apply什么时候使用call

    A4:王栋:传递参数是数组形式的时候用apply,反之使用call

    PPT



    JS中this指向                                 

    推荐阅读更多精彩内容

    • JS中this的指向 【成都小课堂】 1.背景介绍 2.知识剖析 3.常见问题 4.解决方案 5.编码实战 6.扩...
      何华飒阅读 56评论 0 0
    • 1.背景介绍 this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象。 this...
      lx2487阅读 37评论 0 0
    • 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上...
      Mr__王阅读 306评论 0 3
    • 大家好,我是IT修真院成都分院第5期的学员,一枚正直纯洁善良的web程序员 一.背景介绍: 在Java语言中,th...
      张王王阅读 46评论 0 0
    • 1.主键索引 主键索引必定是唯一索引,且不允许空值 2.唯一索引 除开取值唯一以外,与普通索引没有区别 3.普通索...
      everKarma阅读 263评论 0 0