es5中的this,es6中箭头函数中的this

ssshooter 发布于2019-08-26 11:32 / 1356人阅读

一.判断this的绑定对象

1.对于构造函数,new一个新对象,this绑定到新创建的对象上

function Fun(){
    this.user ="fff";
}
var fun1 = new Fun();
console.log(fun1.user);//"fff"

2.由call或者apply调用,this绑定到指定的对象上

function Fun(){
    console.log(this.user);
}
var obj1 ={
    user:"obj1",
    fun:Fun
}
var obj2 ={
    user:"obj2",
    fun:Fun
}
obj1.fun.call(obj2);//obj2

3.函数是否在某个上下文环境中调用,如果是的话,this指向的是那个上下文环境

(1).如果一个函数中有this,并被上一级对象所调用,那么他指向上级对象
    function Fun(){
        console.log(this.user);
    }
    var obj1 ={
        user:"obj1",
        fun:Fun
    }
    obj1.fun();//obj1
(2).如果函数中有多个对象,this还是指向他的上一级对象
    function Fun(){
        console.log(this.user);
    }
    var obj1 ={
        user:"obj1",
        foo:{fun:Fun}
    }
    obj1.foo.fun();//undefined

4.如果以上都不是的话就使用的是默认绑定,在严格模式下,绑定到undefined,在非严格模式下,绑定到全局对象

5.当new一个对象时遇到return总结:如果return的是一个函数或者是对象,this指向的就是return出的函数或者对象;反之,this指向的是调用他的实例

eg1.
function Fun(user){
    this.user =user;
    return {};//或者是function(){}
}
var a = new Fun();
console.log(a);//{}
//这个时候的this是指向return出的空对象的

eg2.
function Fun(user){
    this.user =user;
    return 1;//或者是undefined
}
var a = new Fun();
console.log(a);//Fun {user: undefined}
//this指向新创建的对象

二.es6箭头函数中的this

1.箭头函数中this

(1)箭头函数中的this指向词法作用域,即外层调用者

不使用箭头函数:
eg:
var a = {
  name: function() {
    console.log(this);
  }
}
a.name();//此时的this是指向对象a


使用箭头函数:
var a = {
  name: () => {
    console.log(this);
  }
}
a.name();//此时的this指向全局window

(2).箭头函数中call或者apply并不能修改this的指向

eg:
var a = {
  name: () => {
    console.log(this);
  }
}
a.name.call({ b: "11" });//此时this还是指向window

(3).多层嵌套,箭头函数中的this指向最最外层作用域
eg1:

var a = {
  b: {
    c: {
      d: () => {
        console.log(this);//此时的this是指向window的
      }
    }
  }
}

eg2:

(4).与异步函数的例子
eg1:

window.name = "window";
var a = () => {
  console.log("1", this.name, this); //输出window,this指向window
  this.name = "yyy";
  console.log("2", this.name, this); //输出yyy,this还是指向window
  setTimeout(() => {
        console.log(this.name, this); //输出yyy,说明this是指向window
  }, 1000)
}
a();
详细说明:
a是一个普通函数, 当执行到 console.log("1", this.name, this);时, 在function中并没有定义name属性, 于是根据词法作用域向他的上一级去找是否有name属性, 在window中找到, 输出window.name的值;接着把全局属性name的值改为 "yyy";最后, 在一秒钟后执行异步函数setTimeout输出yyy, 此时由于箭头函数的作用, 异步函数中的this还是指向window

eg2:

var b = {
  c: function() {
setTimeout(() => {
  console.log(this);//此时的this指向函数c
}, 1000);
  }
}
b.c();

输出结果:

总结:箭头函数中的this是在函数定义的时候就已经确定,并不是指向调用函数时的上下文

箭头函数中, this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

GPU云服务器云服务器 javaScript中的this js中的this js中的this机制 js中的this与html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107074.html

ES6+ class中代码的真正样子

摘要：一用定义一个空类在中在中结论这个结果很清晰，原来中的类在中也是定义一个构造函数，然后返回出来。这篇文章用代码对比的方式解释ES6中的类如果用我们熟悉的ES5来看是什么样的。一、用class定义一个空类在ES6中： class Person { } 在ES5中： var Person = (function () { function Person() { } ...

PascalXie 2019-08-20 15:11 评论0 收藏0
前端基础进阶（十四）：es6常用基础合集

摘要：在继承的构造函数中，我们必须如上面的例子那么调用一次方法，它表示构造函数的继承，与中利用继承构造函数是一样的功能。 showImg(https://segmentfault.com/img/remote/1460000009078532); 在实际开发中，ES6已经非常普及了。掌握ES6的知识变成了一种必须。尽管我们在使用时仍然需要经过babel编译。 ES6彻底改变了前端的编码风格，...

Ryan_Li 2019-08-21 18:31 评论0 收藏0
【ES6系列】函数部分

摘要：正是因为它没有，所以也就不能用作构造函数。不可以当作构造函数，也就是说，不可以使用命令，否则会抛出一个错误。不可以使用对象，该对象在函数体内不存在。箭头函数在之前ES5的版本中，我们定义一个函数的形式如下： function a() { // do something…… } 但是在ES6中，则新增了箭头函数的方式，ES6中允许使用箭头（=>）来定义函数。 () => { ...

enda 2019-08-22 16:15 评论0 收藏0
给React初学者的10分钟ES6教程

摘要：但是在中，可以通过关键字来实现类的继承的使用可以使得继承意义更加明确并且值得一提的是，如果你使用来定义的组件，那么可以在类的构造器里面，用简单的的声明方式来替代方法。原文：The 10 min ES6 course for the beginner React Developer译者：Jim Xiao 著名的80/20定律可以用来解释React和ES6的关系。因为ES6增加了超过75...

Awbeci 2019-08-22 18:04 评论0 收藏0
关于ES6中箭头函数的this问题

摘要：对象的指向是可变的，但是在箭头函数中，它是固定的。同样的由于箭头函数没有自己的所以传统的显性绑定无效内部的指向外部在的学习中，的指向问题一直是个难点，特别是在对象方法中使用时，必须更加小心。由此箭头函数在很大程度上减少了我们的困扰。什么是箭头函数用法 ES6 允许使用箭头（=>）定义函数测试 var p1 = document.getElementById(test1)...

LeviDing 2019-08-22 10:53 评论0 收藏0