区别ES3ES5和ES6this的指向问题。区分普通函数和箭头函数中this的指向问题

  • ES3 ES5this的指向问题 this指的是该函数被调用的对象
      var foo = function () {
        this.a = ‘a‘,
          this.b = ‘b‘,
          this.c = {
            a: ‘new a‘,
            b: function () {
              //new a 此时this指的是该函数被调用的对象
              return this.a;
            }
          }
      }
      console.log(new foo().c.b()); //new a
  • ES6的箭头函数 箭头函数的this指的是定义时this的指向,b在定义时,this指向的是c被定义时的函数
    var foo = function () {
        this.a = ‘a‘,
          this.b = ‘b‘,
          this.c = {
            a: ‘new a‘,
            b: () => {
              //a 箭头函数的this指的是定义时this的指向,b在定义时,this指向的是c被定义时的函数,
              return this.a;
            }
          }
      }
      console.log(new foo().c.b()); //a 

原文地址:https://www.cnblogs.com/luxiaoyao/p/8541625.html

时间: 2024-11-01 10:43:54

区别ES3ES5和ES6this的指向问题。区分普通函数和箭头函数中this的指向问题的相关文章

论普通函数和箭头函数的区别以及箭头函数的注意事项、不适用场景

箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱.就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深... 普通函数和箭头函数的区别: 箭头函数的this指向规则: 1. 箭头函数没有prototype(原型),所以箭头函数本身没有this let a = () =>{}; console.log(a.prototype); // undefined 2. 箭头函数的this指向在定义的时候继承自外层第一个普通函数的this

ES6 function函数和箭头函数区别

1.写法不一样 //function function fn(a,b){ return a+b } //arrow function var foo = (a,b)=>{ return a+b } 2.this的指向,function中的this可变(window,内部),箭头函数固定不变指向window function foo(){ console.log(this) } var obj = {aa:foo} foo() //window obj.aa()//obj var foo = ()

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

改变函数中的 this 指向——神奇的call,apply和bind及其应用

在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这三个方法进行详细的讲解,并列出几个经典应用场景. 1.call(thisArgs [,args...]) 该方法可以传递一个thisArgs参数和一个参数列表,thisArgs 指定了函数在运行期的调用者,也就是函数中的 this 对象,而参数列表会被传入调用函数中.thisArgs 的取值有以下4

箭头函数在对象中的this指向,及适用环境

最近在研究ES6的新特性,箭头函数.发现了几个问题,希望跟大家分享一下,也希望能帮助下同样有此困惑的童鞋们. 正常的箭头函数是这样的: var fn = (a, b) => { return a + b }; fn(1,2) //3 这样是没有问题的. 当然,箭头函数出现的原因是为了规范化js中的this指向问题,给我们的编程带来效率. 像以往的var tent = this这种写法,通过箭头函数都可以解决. 究其原因,是因为箭头函数的this指向的是当前的作用域,而非运行时调用函数的对象: v

进阶路上有你我-相互相持篇之ES6里箭头函数里的this指向问题

首先复习下普通函数里的this指向: 1 function test(){ 2 console.log(this) 3 } 4 test() 你会秒杀的毫无疑问的回答:window,针对普通函数:谁调用了函数  函数里的this就指向谁,test()等价于window.test(),所以是window 1 var name="outername" 2 var o={ 3 name:"innername", 4 getname:function(){ 5 consol

es6箭头函数 this 指向问题

es5中 this 的指向 var factory = function(){ this.a = 'a'; this.b = 'b'; this.c = { a:'a+', b:function(){return this.a} } }; console.log(new factory().c.b()); // a+ 通过es5的语法调用,返回的是 a+ ,this 的指向是该函数被调用的对象,也就是说函数被调用的时候,这个 this 指向的是谁,哪个对象调用的这个函数,这个 this 就是谁.

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: ()=>

箭头函数中 的this指向

在javscript中,this 是在函数运行时自动生成的一个内部指针,它指向函数的调用者. 箭头函数有些不同,它的this是继承而来, 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象. var name = "window"; var test = { name:"demo", // 传统函数 getName1: function(){ console.log(this.name); // demo var that = this; setTimeo