es6和es5中的this指向

先看一段代码:

var name = "window";
var obj = {
      name: ‘obj‘,
      //普通函数
      one: function(){
      console.log(this.name)
    },
//箭头函数
two: ()=> {
    console.log(this.name)
    },
//普通函数中的箭头函数
three: function(){
  (()=>{
  console.log(this.name)
    })()
  },
//多层箭头函数
four: ()=> {
    (()=>{
    console.log(this.name)
  })()
  }
}
obj.one(); //obj
obj.two(); //window
obj.three(); //obj
obj.four() //window

说明:

1、

①普通函数中的this总是指向它的直接调用者;

②箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定。

2、

①比如上面的 obj.one();直接调用者是obj,因此this指向obj

②箭头函数中的this指向是固定的,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数内部没有this,箭头函数的this是在定义时就绑定的,它的this就是箭头函数所处的对象的所处作用域。

比如obj.three();箭头函数所在的对象是函数three,函数three处于obj的作用域中,因此this指向obj;

比如obj.four();箭头函数所在的对象是obj,obj处于window的作用域中因此this指向window。

3、

es6函数写法有2种,一种是 fn: (str) => { } ; 一种是 fn(str){ }

箭头函数是没有上下文的、this会直接指向上一级

第二种写法this指向调用它的调用者

原文地址:https://www.cnblogs.com/666666CFH88888888/p/9903989.html

时间: 2024-10-11 03:41:35

es6和es5中的this指向的相关文章

ES6和ES5中数据结构的遍历

看了ES6就感觉各种数据结构的遍历方法好多好混乱,就写下来总结下,看看应用场景上有什么区别 Array: ES5: (1)Array.prototype.forEach(function(item,index,array){...}) (2)Array.prototype.map(function(value,index,array){...//return value,该值会被插入新数组})映射为一个新数组 (3)Array.prototype.some(function(item){.../

ES5中的继承和ES6中的继承

在JavaScript中,prototype.constructor.__proto__.构造函数.原型.实例这些概念已经很让人头疼,再加上ES6的class .extends已经乱成一锅粥了,平时对这些用的少写的少,是得好好捋清楚.看了几篇文章有了自己的理解,理解如下: 构造函数.prototype = 原型: 构造函数.prototype.constructor = 原型.constructor = 构造函数: new 构造函数 = 实例: 实例.constructor = 构造函数: 实例

Javascript定时器中的this指向

使用js中的定时器(setInterval,setTimeout),很容易会遇到this指向的问题. 直接上例子: 1 var name = 'my name is window'; 2 var obj = { 3 name: 'my name is obj', 4 fn: function () { 5 var timer = null; 6 clearInterval(timer); 7 timer = setInterval(function () { 8 console.log(this

ES6与React中this完全解惑

计划写很长的篇幅,预计12月初完成. 先说结论: 无论是ES6还是React的this,相对于ES5,只是增加了箭头函数this绑定了其封闭上下文,自己实现了该词法,其它的关于this的与ES5仍然一样. 目录: 1.ES5中对this使用的4种方式 2.ES6中箭头函数中的this 3.ES6中class中的this 4.React中组件里的this 组件里事件函数,其实相当于把对象方法赋值给新变量后再调用,这和ES5中是一样的,变成了函数调用,this指向全局. 要理解ES6的this知识,

深入理解ES6箭头函数中的this

简要介绍:箭头函数中的this,指向与一般function定义的函数不同,箭头函数this的定义:箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定. (1)一般函数this指向在执行是绑定  当运行obj.say()时候,this指向的是obj这个对象. var x=11; var obj={ x:22, say:function(){ console.log(this.x) } } obj.say(); //console.log输出的是22 (2)所谓的定义时候绑定,就

箭头函数中的this指向

最近做的项目中遇到了在箭头函数里使用this时报错的问题,把箭头函数的写法改成function()后,this的指向才达到预期.关于这个问题值得研究一下. 在箭头函数出现之前的ES5时代,this指向它的调用者.是哪个对象调用了这个属性或方法,this就指向这个对象.这有点像"我"这个人称代词,是从谁的嘴里说出了"我",这个"我"就指代了谁. 一个简单的例子: // 用var定义的变量,this指向window // 调用sayName()等于调

ES6与ES5的继承

ES6 ES6中的类 类与ES5中的构造函数写法类似 区别在于属性要放入constructor中,静态方法和属性实列不会继承 <script> class Person{ height="178cm"; constructor(name,age){ //属性 this.name = name; this.age = age; } //方法 getName(){ console.log("姓名是:"+this.name); } //静态方法 static

JavaScript 中的this指向问题

全局执行     首先,我们在全局环境中看看它的 this 是什么:     浏览器:     console.log(this);     // Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}     可以看到打印出了 window 对

ES5中新增的Array方法详细说明

ES5中新增的不少东西,了解之对我们写JavaScript会有不少帮助,比如数组这块,我们可能就不需要去有板有眼地for循环了. ES5中新增了写数组方法,如下: forEach (js v1.6) map (js v1.6) filter (js v1.6) some (js v1.6) every (js v1.6) indexOf (js v1.6) lastIndexOf (js v1.6) reduce (js v1.8) reduceRight (js v1.8) 浏览器支持 Ope