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指向调用它的调用者
2019-01-30补充
//1内部this对象指向创建期上下文对象
// 普通函数的this指向是在函数的执行期间绑定的
//比如
function fn6(){
console.log(this)
}
fn6() // 自调用的时候,指向window
var obj = {};
obj.f = fn6;
obj.f(); // 指向他的直接调用者obj
document.onclick = fn6; // 指向触发该事件的对象 document
ES6和ES5中的this指向问题的更多相关文章
- ES5中改变this指向的三种方法
ES5中提供了三种改变函数中this指针指向的方法,分别如下 1.call() var obj = {username:"孙悟空"}; //没有任何修饰的调用函数,函数中的this ...
- ES6中的类继承和ES5中的继承模式详解
1.ES5中的继承模式 我们先看ES5中的继承. 既然要实现继承,首先我们得要有一个父类. Animal.prototype.eat = function(food) { console.log(th ...
- ES6中。类与继承的方法,以及与ES5中的方法的对比
// 在ES5中,通常使用构造函数方法去实现类与继承 // 创建父类 function Father(name, age){ this.name = name; this.age = age; } F ...
- Javascript定时器中的this指向
使用js中的定时器(setInterval,setTimeout),很容易会遇到this指向的问题. 直接上例子: var name = 'my name is window'; var obj = ...
- JS中的this 指向问题
我发现在对JS的学习中有很多朋友对this的指向问题还是有很大的误区或者说只是大致了解,但是一旦遇到复杂的情况就会因为this指向问题而引发各种bug. 对于之前学习过c或者是Java的朋友来说可能这 ...
- Javascript回调函数中的this指向问题
使用js中的定时器(setInterval,setTimeout),很容易会遇到this指向的问题. 直接上例子: 1 var name = 'my name is window'; 2 var ob ...
- ES6与React中this完全解惑
计划写很长的篇幅,预计12月初完成. 这篇文章涉及的知识较多,可能一次消化不了,可以渐渐来. 先说结论: 无论是ES6还是React的this,相对于ES5,只是增加了箭头函数this绑定了其封闭上下 ...
- JavaScript中this的指向(转载)
转载自:http://www.cnblogs.com/dongcanliang/p/7054176.html 前言 this 指向问题是入坑前端必须了解知识点,现在迎来了ES6时代,因为箭头函数的出现 ...
- ES5中的this
参考资料:>>> this的指向 在 ES5 中,其实 this 的指向,始终坚持一个原理: this 永远指向最后调用它的那个对象 下面我们来看一个最简单的例子:(例子均来自参考资 ...
随机推荐
- 使用bat一键打开java、jar、py文件
直接运行jar是没有命令行窗口的,如果想有命令行窗口,一般来说是要 win+r 运行cmd,定位到所在目录,然后用命令行执行 java -jar xxx.jar 而对于python,打开py文件也是麻 ...
- 前端基础 之 CSS
浏览目录 CSS介绍 CSS语法 CSS的几种引入方式 CSS选择器 CSS属性相关 一.CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览 ...
- 多线程学习-基础(十三)(学习参考·网摘) ArrayBlockingQueue源代碼解析(base jdk 1.8)
前记: 这个得首先声明一下,以下大部分内容均参考于:https://blog.csdn.net/wx_vampire/article/details/79585794,本随笔只作为学习作用,侵权删! ...
- C#之WinForm界面分辨率问题
在做上一个C#小工具的时候,当时为了处理界面最大化,分辨率问题,只是简单的用各种···Panle控价简单随意的处理控件的大小位置,字体什么的就随缘了(貌似有点不负责任啊,嘿嘿~). 所以在开始第二个C ...
- c#百分比计算
//此方法得到的百分比后小数太多,不行double percent=Convert.ToDouble(2)/Convert.ToDouble(34); string result=(percent*1 ...
- Java NIO学习笔记
Java NIO学习笔记 一 基本概念 IO 是主存和外部设备 ( 硬盘.终端和网络等 ) 拷贝数据的过程. IO 是操作系统的底层功能实现,底层通过 I/O 指令进行完成. 所有语言运行时系统提供执 ...
- Java连接Hbase异常
Exception in thread "main" org.apache.hadoop.hbase.client.RetriesExhaustedException: Faile ...
- Java—多线程实现PV效果
前言 还记得今年参加自学操作系统考试,最难分析的就是PV这部分,然而伟大的米老师却用一个放东西吃东西的小例子,把PV讲的栩栩如生,言简意赅.学J2SE时学到了线程部分,里面提到了线程同步,死锁问题等等 ...
- Beautiful Sequence
Beautiful Sequence 给定一些数(可能相同),将它们随机打乱后构成凹函数,求概率 .N<=60 . 首先,这种题求概率事实上就是求方案.所以现在要求的是用这些数构成凹函数的方案数 ...
- Unity---UGUI入门基础---更新中
目录 1.UGUI介绍 2.UGUI基础 2.1 Canvas---画布 2.2 Text控件 2.3 Image控件 2.4 RawImage控件 2.5 Button控件 2.6 Toggle控件 ...