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中 箭头函数 this 的指向

var factory = function(){
this.a = 'a';
this.b = 'b';
this.c = {
a:'a+',
b:() => {return this.a}
}
};
console.log(new factory().c.b()); // a

箭头函数函数体中 this 的指向是定义时 this 的指向。在定义 b 函数时,b当中的 this 指向的是 这个factory 函数体中的 this ,这个 factory 函数体中的 this 指向的是这个构造函数的实例,这个实例当中的 a 就等于 ‘a’;虽然是调用的b对象,但这个b对象指向的是这个实例。

箭头函数的this指向:箭头函数在定义时执行器上下文的this的指向(不具有块级作用域),即会取当前的函数的作用域链上的this,忽略块级作用域中的this

1.

var x=11;
var obj={
x:22,
say:function(){
console.log(this.x)
}
}
obj.say(); //

一般的定义函数跟我们的理解是一样的,运行的时候决定this的指向,我们可以知道当运行obj.say()时候,this指向的是obj这个对象。

2.

var x=11;
var obj={
x:22,
say:()=>{
console.log(this.x);
}
}
obj.say();//

es6箭头函数中的this是定义时绑定的,就是this是继承自父执行上下文!!中的this,比如这里的箭头函数中的this.x,箭头函数本身与say平级以key:value的形式,也就是箭头函数本身所在的对象为obj,而obj的父执行上下文就是window,因此这里的this.x实际上表示的是window.x,因此输出的是11。(this只有在函数被调用,或者通过构造函数new Object()的形式才会有this)

3.

var a=11
function test1(){
this.a=22;
let b=function(){
console.log(this.a);
};
b();
}
var x=new test1();//
var a=11
function test1(){
this.a=22;
let b=function(){
console.log(this.a);
};
b();
}
test1();//

箭头函数情况下:

var a=11;
function test2(){
this.a=22;
let b=()=>{console.log(this.a)}
b();
}
var x=new test2();//

ES6中定义的时候绑定this的具体含义,应该继承的是父执行上下文里面的this,切忌是父执行上下文!!!

简单对象(非函数)是没有执行上下文的!

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

es6箭头函数 this 指向问题的更多相关文章

  1. ES6 箭头函数 this 指向

    ES6 箭头函数 this 指向 箭头函数有几个使用注意点: 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个 ...

  2. ES6 箭头函数this指向问题

    var name = "window"; var person1 = { name: "person1", show1: function() { consol ...

  3. ES6 箭头函数this指向

    箭头函数有几个使用注意点. (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误. (3)不可以使 ...

  4. ES6箭头函数this指向

    普通函数中的this: 1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式下,未使用 'us ...

  5. ES6箭头函数与this指向

    一.ES6箭头函数 ES6之前的语法想要定义一个函数,如图example1,ES6之后定义一个函数如图example2,相比较之下简洁了很多 二.函数的this指向 非箭头函数,谁调用函数this指向 ...

  6. es6箭头函数讲解

    es6箭头函数的用法 箭头函数是es6的一种函数的简写方法. 如下: var f = v = > v; //等同于 var f = function(v){ return v; } var su ...

  7. ES6 — 箭头函数

    一 为什么要有箭头函数 我们在日常开发中,可能会需要写类似下面的代码 const Person = { 'name': 'little bear', 'age': 18, 'sayHello': fu ...

  8. js this问题和es6箭头函数this问题

    JS中this的四种用法 1.在一般函数方法中使用 this 指代全局对象 function test(){ this.x = 1; alert(this.x); } test(); //1 2.作为 ...

  9. Vue ES6箭头函数使用总结

    Vue ES6箭头函数使用总结   by:授客 QQ:1033553122   箭头函数 ES6允许使用“箭头”(=>)定义函数: 函数不带参数 定义方法:函数名称 = () => 函数体 ...

随机推荐

  1. Spring笔记02_注解_IOC

    目录 Spring笔记02 1. Spring整合连接池 1.1 Spring整合C3P0 1.2 Spring整合DBCP 1.3 最终版 2. 基于注解的IOC配置 2.1 导包 2.2 配置文件 ...

  2. 【JVM】问题排查

    jetty的调用场景是:为了支持Servlet规范中的注解方式(使得不再需要在web.xml文件中进行Servlet的部署描述,简化开发流程),jetty在启动时会扫描class.lib包,将使用注解 ...

  3. 解决Azure 消息队列ServiceBus提示证书不信任无权限的问题

    笔者在C# 消息队列-Microsoft Azure service bus 服务总线中使用Azure消息队列,最近偶尔会遇到请求数据不入队列的问题,查找日志,问题如下: 异常:X. certific ...

  4. 一文读懂HTTP/2及HTTP/3特性

    摘要: 学习 HTTP/2 与 HTTP/3. 前言 HTTP/2 相比于 HTTP/1,可以说是大幅度提高了网页的性能,只需要升级到该协议就可以减少很多之前需要做的性能优化工作,当然兼容问题以及如何 ...

  5. css——rgba()和opacity的区别

    (学习笔记) 首先他们都能实现透明效果,不同的是作用对象. rgba()是css中设置背景颜色中的一个属性.而opacity是css的一个属性,也就是rgba()的作用对象是元素的背景颜色或元素的颜色 ...

  6. 42.Odoo产品分析 (四) – 工具板块(10) – 问卷(2)

    查看Odoo产品分析系列--目录 接上一篇Odoo产品分析 (四) – 工具板块(10) – 问卷(1) 4 页面 即问卷,点开一项查看:  可以看出,网页就是问卷本身的子目录,其中指明了该目录包括哪 ...

  7. android常犯错误记录(二)

    检查 minSdkVersion什么的是不是和你依赖的包一样,它上面也有个小提示,显示本地的11,依赖的为15,那就改成15好了,重新build好了 ClassNotFoundException异常 ...

  8. 关于 MongoDB 与 SQL Server 通过本身自带工具实现数据快速迁移 及 注意事项 的探究

    背景介绍 随着业务的发展.需求的变化,促使我们追求使用不同类型的数据库,充分发挥其各自特性.如果决定采用新类型的数据库,就需要将既有的数据迁移到新的数据库中.在这类需求中,将SQL Server中的数 ...

  9. Class.isAssignableFrom与instanceof的区别

    isAssignableFrom 假设有两个类Class1和Class2.Class1.isAssignableFrom(Class2)表示: 类Class1和Class2是否相同. Class1是否 ...

  10. LNMP时,出现502 Bad Gateway的错误提示

    因为工作需要,要在ubuntu中安装LNMP环境,在这里,php是最新版本php7.1.一切都进展得很顺利,安装完成后,在浏览器中输入http://127.0.0.1/info.php,出现了502 ...