扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript逐点突破系列之this是什么
  • 593

0
分享到

JavaScript逐点突破系列之this是什么

2024-04-02 19:04:59 593人浏览 八月长安
摘要

了解this 也许你在其他面向对象的编程语言曾经看过this，也知道它会指向某个构造器(constructor)所建立的对象。但事实上在javascript里面，this所代表的不仅

了解this

也许你在其他面向对象的编程语言曾经看过this，也知道它会指向某个构造器(constructor)所建立的对象。但事实上在javascript里面，this所代表的不仅仅是那个被建立的对象。

先来看看ECMAScript 标准规范对this 的定义：

「The this keyWord evaluates to the value of the ThisBinding of the current execution context.」
「this 这个关键字代表的值为当前执行上下文的ThisBinding。」

然后再来看看MDN 对this 的定义：

「In most cases, the value of this is determined by how a function is called.」
「在大多数的情况下，this 其值取决于函数的调用方式。」

好，如果上面两行就看得懂的话那么就不用再往下看了，Congratulations！

… 我想应该不会，至少我光看这两行还是不懂。

先来看个例子吧：


var getGender = function() {
    return people1.gender;
};

var people1 = {
    gender: 'female',
    getGender: getGender
};

var people2 = {
    gender: 'male',
    getGender: getGender
};

console.log(people1.getGender());    // female
console.log(people2.getGender());    // female

what?怎么people2变性了呢，这不是我想要的结果啊，为什么呢？

因为getGender()返回(return)写死了people1.gender的关系，结果自然是'female'。

那么，如果我们把getGender稍改一下：


var getGender = function() {
    return this.gender;
};

这个时候，你应该会分别得到female与male两种结果。

所以回到前面讲的重点，从这个例子可以看出，即便people1与people2的getGender方法参照的都是同一个getGender function，但由于调用的对象不同，所以执行的结果也会不同。

现在我们知道了第一个重点，**this实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数的调用方式。**如何的区分this呢？

this到底是谁

看完上面的例子，还是有点似懂非懂吧？那接下来我们来看看不同的调用方式对 this 值的影响。

情况一：全局对象&调用普通函数

在全局环境中，this 指向全局对象，在浏览器中，它就是 window 对象。下面的示例中，无论是否是在严格模式下，this 都是指向全局对象。


var x = 1

console.log(this.x)               // 1
console.log(this.x === x)         // true
console.log(this === window)      // true

如果普通函数是在全局环境中被调用，在非严格模式下，普通函数中 this 也指向全局对象；如果是在严格模式下，this 将会是 undefined。ES5 为了使 JavaScript 运行在更有限制性的环境而添加了严格模式，严格模式为了消除安全隐患，禁止了 this 关键字指向全局对象。


var x = 1

function fn() {
    console.log(this);   // Window 全局对象
    console.log(this.x);  // 1
}

fn();

使用严格模式后：


"use strict"     // 使用严格模式
var x = 1

function fn() {
    console.log(this);   // undefined
    console.log(this.x);  // 报错 "Cannot read property 'x' of undefined"，因为此时 this 是 undefined
}

fn();

情况二：作为对象方法的调用

我们知道，在对象里的值如果是原生值（primitive type；例如，字符串、数值、布尔值），我们会把这个新建立的东西称为「属性（property）」；如果对象里面的值是函数（function）的话，我们则会把这个新建立的东西称为「方法（method）」。

如果函数作为对象的一个方法时，并且作为对象的一个方法被调用时，函数中的this指向这个上一级对象。


var x = 1
var obj = {
    x: 2,
    fn: function() {
        console.log(this);    
        console.log(this.x);
    }
}

obj.fn()     

// obj.fn()结果打印出;
// Object {x: 2, fn: function}
// 2

var a = obj.fn
a()   

// a()结果打印出:   
// Window 全局对象
// 1

在上面的例子中，直接运行 obj.fn() ，调用该函数的上一级对象是 obj，所以 this 指向 obj，得到 this.x 的值是 2；之后我们将 fn 方法首先赋值给变量 a，a 运行在全局环境中，所以此时 this 指向全局对象Window，得到 this.x 为 1。

我们再来看一个例子，如果函数被多个对象嵌套调用，this 会指向什么。


var x = 1
var obj = {
  x: 2,
  y: {
    x: 3,
    fn: function() {
      console.log(this);   // Object {x: 3, fn: function}
      console.log(this.x);   // 3
    }
  }
}

obj.y.fn();

为什么结果不是 2 呢，因为在这种情况下记住一句话：this 始终会指向直接调用函数的上一级对象，即 y，上面例子实际执行的是下面的代码。


var y = {
  x: 3,
  fn: function() {
    console.log(this);   // Object {x: 3, fn: function}
    console.log(this.x);   // 3
  }
}

var x = 1
var obj = {
  x: 2,
  y: y
}

obj.y.fn();

对象可以嵌套，函数也可以，如果函数嵌套，this 会有变化吗？我们通过下面代码来探讨一下。


var obj = {
    y: function() {
        console.log(this === obj);   // true
        console.log(this);   // Object {y: function}
        fn();

        function fn() {
            console.log(this === obj);   // false
            console.log(this);   // Window 全局对象
        }
    }
}

obj.y();

在函数 y 中，this 指向了调用它的上一级对象 obj，这是没有问题的。但是在嵌套函数 fn 中，this 并不指向 obj。嵌套的函数不会从调用它的函数中继承 this，当嵌套函数作为函数调用时，其 this 值在非严格模式下指向全局对象，在严格模式是 undefined，所以上面例子实际执行的是下面的代码。


function fn() {
    console.log(this === obj);   // false
    console.log(this);   // Window 全局对象
}

var obj = {
    y: function() {
        console.log(this === obj);   // true
        console.log(this);   // Object {y: function}
        fn();
    }
}

obj.y();

情况三：作为构造函数调用

我们可以使用 new 关键字，通过构造函数生成一个实例对象。此时，this 便指向这个新对象。


var x = 1;

function Fn() {
　  this.x = 2;
    console.log(this);  // Fn {x: 2}
}

var obj = new Fn();   // obj和Fn(..)调用中的this进行绑定
console.log(obj.x)   // 2

使用new来调用Fn(..)时，会构造一个新对象并把它（obj）绑定到Fn(..)调用中的this。还有值得一提的是，如果构造函数返回了非引用类型（string，number，boolean，null，undefined），this 仍然指向实例化的新对象。


var x = 1

function Fn() {
  this.x = 2

  return {
    x: 3
  }
}

var a = new Fn()

console.log(a.x)      // 3

因为Fn()返回(return)的是一个对象（引用类型），this 会指向这个return的对象。如果return的是一个非引用类型的值呢？


var x = 1

function Fn() {
  this.x = 2

  return 3
}

var a = new Fn()

console.log(a.x)      // 2

情况四：call 和 apply 方法调用

如果你想改变 this 的指向，可以使用 call 或 apply 方法。它们的第一个参数都是指定函数运行时其中的this指向。如果第一个参数不传（参数为空）或者传 null 、undefined，默认 this 指向全局对象（非严格模式）或 undefined（严格模式）。


var x = 1;

var obj = {
  x: 2
}

function fn() {
    console.log(this);
    console.log(this.x);
}

fn.call(obj)
// Object {x: 2}
// 2

fn.apply(obj)     
// Object {x: 2}
// 2

fn.call()         
// Window 全局对象
// 1

fn.apply(null)    
// Window 全局对象
// 1

fn.call(undefined)    
// Window 全局对象
// 1

使用 call 和 apply 时，如果给 this 传的不是对象，JavaScript 会使用相关构造函数将其转化为对象，比如传 number 类型，会进行new Number()操作，如传 string 类型，会进行new String()操作，如传 boolean 类型，会进行new Boolean()操作。


function fn() {
  console.log(Object.prototype.toString.call(this))
}

fn.call('love')      // [object String]
fn.apply(1)          // [object Number]
fn.call(true)          // [object Boolean]

call 和 apply 的区别在于，call 的第二个及后续参数是一个参数列表，apply 的第二个参数是数组。参数列表和参数数组都将作为函数的参数进行执行。


var x = 1

var obj = {
  x: 2
}

function Sum(y, z) {
  console.log(this.x + y + z)
}

Sum.call(obj, 3, 4)       // 9
Sum.apply(obj, [3, 4])    // 9

情况五：bind 方法调用

调用 f.bind(someObject) 会创建一个与 f 具有相同函数体和作用域的函数，但是在这个新函数中，新函数的 this 会永久的指向 bind 传入的第一个参数，无论这个函数是如何被调用的。


var x = 1

var obj1 = {
    x: 2
};
var obj2 = {
    x: 3
};

function fn() {
    console.log(this);
    console.log(this.x);
};

var a = fn.bind(obj1);
var b = a.bind(obj2);

fn();
// Window 全局对象
// 1

a();
// Object {x: 2}
// 2

b();
// Object {x: 2}
// 2

a.call(obj2);
// Object {x: 2}
// 2

在上面的例子中，虽然我们尝试给函数 a 重新指定 this 的指向，但是它依旧指向第一次 bind 传入的对象，即使是使用 call 或 apply 方法也不能改变这一事实，即永久的指向 bind 传入的第一次参数。

情况六：箭头函数中this指向

值得一提的是，从es6 开始新增了箭头函数，先来看看MDN 上对箭头函数的说明

An arrow function expression has a shorter syntax than a function expression and does notbind its ownthis,arguments,super, ornew.target. Arrow functions are always anonymous. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

这里已经清楚了说明了，箭头函数没有自己的this绑定。箭头函数中使用的this，其实是直接包含它的那个函数或函数表达式中的this。在前面情况二中函数嵌套函数的例子中，被嵌套的函数不会继承上层函数的 this，如果使用箭头函数，会发生什么变化呢？


var obj = {
  y: function() {
        console.log(this === obj);   // true
        console.log(this);           // Object {y: function}

      var fn = () => {
          console.log(this === obj);   // true
          console.log(this);           // Object {y: function}
      }
      fn();
  }
}

obj.y()

和普通函数不一样，箭头函数中的 this 指向了 obj，这是因为它从上一层的函数中继承了 this，你可以理解为箭头函数修正了 this 的指向。所以箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this。

换句话说，箭头函数的this看外层的是否有函数，如果有，外层函数的this就是内部箭头函数的this，如果没有，则this是window。


var obj = {
  y: () => {
        console.log(this === obj);   // false
        console.log(this);           // Window 全局对象 

      var fn = () => {
          console.log(this === obj);   // false
          console.log(this);           // Window 全局对象 
      }
      fn();
  }
}

obj.y()

上例中，虽然存在两个箭头函数，其实this取决于最外层的箭头函数，由于obj是个对象而非函数，所以this指向为Window全局对象。

同 bind 一样，箭头函数也很“顽固”，我们无法通过 call 和 apply 来改变 this 的指向，即传入的第一个参数被忽略。


var x = 1
var obj = {
    x: 2
}

var a = () => {
    console.log(this.x)
    console.log(this)
}

a.call(obj)       
// 1
// Window 全局对象

a.apply(obj)      
// 1
// Window 全局对象

上面的文字描述过多可能有点干涩，那么就看以下的这张流程图吧，我觉得这个图总结的很好，图中的流程只针对于单个规则。

小结

本篇文章介绍了 this 指向的几种情况，不同的运行环境和调用方式都会对 this 产生影响。总的来说，函数 this 的指向取决于当前调用该函数的对象，也就是执行时的对象。在这一节中，你需要掌握：

  • this 指向全局对象的情况；
  • 严格模式和非严格模式下 this 的区别；
  • 函数作为对象的方法调用时 this 指向的几种情况；
  • 作为构造函数时 this 的指向，以及是否 return 的区别；
  • 使用 call 和 apply 改变调用函数的对象；
  • bind 创建的函数中 this 的指向；
  • 箭头函数中的 this 指向。

到此这篇关于JavaScript逐点突破系列之this是什么的文章就介绍到这了,更多相关JavaScript this内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: JavaScript逐点突破系列之this是什么

本文链接: https://lsjlt.com/news/123688.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript逐点突破系列之this是什么
    了解this 也许你在其他面向对象的编程语言曾经看过this，也知道它会指向某个构造器(constructor)所建立的对象。但事实上在JavaScript里面，this所代表的不仅...
    99+
    2024-04-02
  • JavaScript和ECMAScript之间的关系是什么
    这篇“JavaScript和ECMAScript之间的关系是什么”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面...
    99+
    2024-04-02
  • Redux源码解析系列之什么是createStore
    本篇内容主要讲解“Redux源码解析系列之什么是createStore”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Redux源码解析系列之什么是createStore”吧!INIT这个方法是r...
    99+
    2023-06-16
  • 设计模式系列之什么是桥接模式
    这篇文章主要介绍“设计模式系列之什么是桥接模式”，在日常操作中，相信很多人在设计模式系列之什么是桥接模式问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”设计模式系列之什么是桥接...
    99+
    2024-04-02
  • 设计模式系列之什么是解释器模式
    本篇内容主要讲解“设计模式系列之什么是解释器模式”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“设计模式系列之什么是解释器模式”吧! 模式定义给分析对象...
    99+
    2024-04-02
  • JavaScript构造函数与原型之间的联系是什么
    这篇文章主要介绍“JavaScript构造函数与原型之间的联系是什么”，在日常操作中，相信很多人在JavaScript构造函数与原型之间的联系是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScr...
    99+
    2023-06-21
  • 异步编程：Python、Unix、JavaScript之间的差异和共同点是什么？
    异步编程是一种编程模型，它可以在程序执行其他任务的同时，处理多个并发的异步操作。Python、Unix和JavaScript都支持异步编程，但它们之间存在着差异和共同点。本文将探讨Python、Unix和JavaScript之间异步编程的差...
    99+
    2023-06-18
    unix javascript 异步编程
  • 您是否知道ASP、索引、JavaScript和Unix之间有什么共通点？
    ASP、索引、JavaScript和Unix虽然看似毫无关联，但实际上它们之间有着某些共通点。在本文中，我们将探讨这些共通点，并且演示一些相关的代码。 一、ASP和JavaScript ASP是一种基于服务器端的脚本语言，它可以用来创建动态...
    99+
    2023-09-23
    索引 javascript unix
  • 经典算法系列之KMP算法的原理及功能是什么
    KMP算法是一种字符串匹配算法，它的功能是在一个文本串中查找一个模式串的出现位置。KMP算法的原理是利用模式串内部的信息，即前缀和后...
    99+
    2023-09-22
    KMP算法
  • CSS中单位px与em之间的关系和特点是什么
    这篇文章主要介绍“CSS中单位px与em之间的关系和特点是什么”，在日常操作中，相信很多人在CSS中单位px与em之间的关系和特点是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作