JavaScript中的this关键词指向

目录
  • 1、es5中的this的指向
  • 2、es6中的this

1、es5中的this的指向

  • this是JavaScript的一个关键字，他是函数执行过程中，自动生成的一个内部对象，指当前的对象，只在当前函数内部使用。
  • 在es5中this的指向取决于函数运行时的环境。
  • 没有直接挂载者(或称调用者)的函数中this，非严格模式下指向window，在use strict严格模式下，默认为undefined。以下都是在非严格模式下讨论
var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: function() {
    console.log(this.name);
  }
};
var fn = obj.fn;
fn();     // hello window!
obj.fn(); // hello obj!

obj.fn()在执行时，fn中的this指向的是当前的调用对象obj。fn()执行时，this指向的是window对象。

var fn = obj.fn; // 等价于 window.fn = obj.fn;
fn();            // 等价于 window.fn();

匿名函数的执行环境是全局的

var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: function() {
    console.log(this.name); // 'hello obj!'
    return function() {
      console.log(this.name); // 'hello window!'
    };
  }
};
obj.fn()();

2、es6中的this

  • es6箭头函数的特点
  • 箭头函数没有自己的this
  • 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象，即外层代码的this引用。
  • 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
  • 没有arguments对象。如果要用，可以用Rest参数代替。
  • 不可以使用yield命令，因此箭头函数不能用作Generator函数

示例说明，修改上述示例代码中的函数为箭头函数：

// 示例代码1
var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: () => {
    console.log(this.name);  // 这里的this指向的外层的this,即window对象，想当于上打印的是console.log(window.name);
  }
};
var fn = obj.fn;
fn();       // hello window!
obj.fn();   // hello window!

// 示例代码2
var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: function() {
    console.log(this.name);   // hello obj!
    return () => {
      console.log(this.name); // hello obj!  // this指向外层的this，即obj对象
    };
  }
};
obj.fn()();

总结：

  • es5中的this主要看运行的环境，指向的是调用它的对象。
  • 箭头函数中的this是在一开始就固定的，并不受调用对象

到此这篇关于JavaScript中的this关键词指向的文章就介绍到这了,更多相关js的this指向内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS 箭头函数的this指向详解

    箭头函数是ES6中的新增特性,他没有自己的this,其this指向从外层代码库继承. 使用箭头函数时要注意一下几点: 箭头函数不能用作构造函数,用的话会抛出一个错误 无法使用arguments参数,如果要用的话就用rest 无法使用yield命令,所以箭头函数无法用作Generator函数 因为没有自己的this,所以没法通过bind.call.apply来改变this指向 但是这不代表箭头函数的this指向是静态的,我们可以通过改变它外层代码库的this指向来控制 箭头函数的this从外层代码

  • JavaScript中的this指向和自定义属性详解

    目录 1.this关键字 2.自定义属性 3.综合案例1:tab选项卡的实现 附录 总结 1.this关键字 this指向的是当前元素 全局函数中的this指向window对象 代码中声明了一个全局函数,是属于浏览器窗口对象的,所以this表示的就是浏览器窗口对象window function fn() { consolo.log(this); } fn() 标签事件属性中的this指向window对象 如果将一个全局函数在一个标签属性中调用,如下: <button onclick="fn

  • JavaScript函数this指向问题详解

    JavaScript函数this指向问题详解

    目录 一. 函数内 this 的指向 1.普通函数 2.构造函数 3.对象方法 4.事件绑定方法 5.定时器函数 6.立即执行函数 二.改变函数内部 this 指向 1.call 方法 2.apply 方法 3.bind 方法 三.call apply bind 总结 1.相同点 2.不同点  3.应用场景  总结 一. 函数内 this 的指向 这些 this的指向,是当调用函数的时候确定的. 调用方式的不同决定了this 的指向不同,一般指向调用者. 现在我们来具体看看吧! 1.普通函数 f

  • 详解JavaScript原型对象的this指向问题

    详解JavaScript原型对象的this指向问题

    目录 一.this指向 二.修改this指向 1.call()方法 2.apply()方法 总结 一.this指向 构造函数中的this 指向实例对象.那么原型对象this的指向呢? 如下: function Student(age,name){ this.age = age; this.name = name; } var that; Student.prototype.score = function(){ console.log('孩子们成绩都很好!'); that = this; } v

  • JavaScript中的this关键词指向

    目录 1.es5中的this的指向 2.es6中的this 1.es5中的this的指向 this是JavaScript的一个关键字,他是函数执行过程中,自动生成的一个内部对象,指当前的对象,只在当前函数内部使用. 在es5中this的指向取决于函数运行时的环境. 没有直接挂载者(或称调用者)的函数中this,非严格模式下指向window,在use strict严格模式下,默认为undefined.以下都是在非严格模式下讨论 var name = 'hello window!'; var obj

  • Javascript中函数分类&this指向的实例详解

    Javascript中函数分类&this指向的实例详解

    JS中定义函数的三种方式 通过实例来说明吧 <script> //method1 function fn() { console.log('fn created '); } //method2 var fn2 = function () { console.log('fn2 created'); } //method3 var fn3 = new Function('test', 'console.log(test);'); fn3('fn3 test'); console.dir(fn3);

  • JavaScript中 this 的绑定指向规则

    目录 问题来源 this 绑定规则 1.默认绑定 2.隐式绑定 3.显示绑定 4.new 绑定 5.内置方法 6.规则优先级 7.规则之外 8.实践 问题来源 在 js 中,有一个疑惑的点 this, 它的指向问题,存在各种各样的,来看一下,它是如何绑定指向的吧 函数在调用时,JavaScript 会默认给 this 绑定一个值 this 的绑定和定义的位置(编写的位置)没有关系 this 的绑定和调用方式以及调用的位置有关系 this 是在运行时,动态绑定的 this 绑定规则 1.默认绑定

  • 浅谈JavaScript中的this指针和引用知识

    this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. this指针在传统OO语言中,是在类中声明的,表示对象本身.在JavaScript中,this表示当前上下文,即调用者的引用 ********this永远指向的是(函数对象)的所有者 this和全局对象: var a = 1; function foo(){ var b = 2; console.log(this.a+b);//3 } foo();

  • 深入理解JavaScript中的call、apply、bind方法的区别

    深入理解JavaScript中的call、apply、bind方法的区别

    在JavaScript 中,this的指向是动态变化的,很可能在写程序的过程中,无意中破坏掉this的指向,所以我们需要一种可以把this的含义固定的技术,于是就有了call,apply 和bind这三个方法,来改变函数体内部 this 的指向,因为函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念 apply.call apply:应用某一对象的一个方法,用另一个对象替换当前对象 call:调用一个对象的一个方法,以另一个对象替换当前对象 function pers

  • 关于JavaScript中的this指向问题总结篇

    在javascript中this的指向一直是前端同事的心头病,也同时是各面试题的首选,现在我们就来总结一下js中this的指向.首先需要了解一下几个概念: 1:全局变量默认挂载在window对象下 2:一般情况下this指向它的调用者 3:es6的箭头函数中,this指向创建者,并非调用者 4:通过call.apply.bind可以改改变this的指向 下面我们具体分析一下 1:在函数调用时 (非严格模式) const func = function () { console.log(this)

  • 详解JavaScript中this的指向问题

    this是面向对象语言中一个重要的关键字,理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要.而javascript的this又有区别于Java.C#等纯面向对象的语言,这使得this更加扑朔迷离,让人迷惑. this使用到的情况: 1. 纯函数 2. 对象方法调用 3. 使用new调用构造函数 4. 内部函数 5. 使用call / apply 6.事件绑定 1. 纯函数 var name = 'this is window'; //定义window的name属性 function

  • JavaScript中 this 指向问题深度解析

    JavaScript 中的 this 指向问题有很多文章在解释,仍然有很多人问.上周我们的开发团队连续两个人遇到相关问题,所以我不得不将关于前端构建技术的交流会延长了半个时候讨论 this 的问题. 与我们常见的很多语言不同,JavaScript 函数中的 this 指向并不是在函数定义的时候确定的,而是在调用的时候确定的.换句话说, 函数的调用方式决定了 this 指向 . JavaScript 中,普通的函数调用方式有三种:直接调用.方法调用和 new 调用.除此之外,还有一些特殊的调用方式

  • 探寻JavaScript中this指针指向

    探寻JavaScript中this指针指向 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题. 为什么要学习this?如果你学过函数式编程,面向对象编程,那你肯定知

  • javascript中this指向详解

    javascript中this指向详解

    JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发JavaScript其实很难掌握,有些基本概念让人匪夷所思.其中JavaScript 中的 this 关键字,就是一个比较容易混乱的概念,在不同的场景下,this会化身不同的对象.有一种观点认为,只有正确掌握了 JavaScript 中的 this 关键字,才算是迈入了 JavaScript 这门语言的门槛.在主流的面向对象的语言中(例

随机推荐