Web前端基础知识:ES5及ES6this详解
今天,我们学习一下JavaScript中的this。我们从什么是this,ES5及ES6中this的几种情况进行学习。让this变的so easy,我们这里说的都是非严格模式下。
什么是this
this表示当前行为执行的主体,在javaScript中this不是函数独有的,但是我们主要研究的是函数中的this,为了方便大家理解我们举个例子。
小明今天项目成功上线了,提前下班,不用加班了,奖励自己去肯德基吃一个汉堡,对于这句话我们简单的分析下:
在哪里吃:肯德基
谁吃:小明
在这里肯德基是吃的环境,小明是当前吃这个行为的主体。
//全局作用域下
Var myBody = document.body;
//window是可以省略的 当前body元素的宽度都会被输出
console.log(window.getComputedStyle(myBody).width;);//726px
console.log(getComputedStyle(myBody).width;);//726px
//我们在这里输出this ->window
console.log(this);//window
ES5中this的几种情况
1.全局作用域下的this是window
前边的我们说过this代表当前行为执行的主体,在全局作用域下所有的属性和方法都是window的属性和方法,并且window是可以省略的。那么也就是说我们去调用一个方法在全局作用域下,谁调用的也就是window调用,那么window就是当前行为执行的主体,和去肯德基吃汉堡是一样的谁吃小明,那么小明就是当前行为执行的主体。
2.自执行函数中的this是window
在javaScript中我们主要研究的是函数中的this,自执行函数中的this永远是window,因为函数就是一个方法,一种行为,这个行为是直接执行的,那么执行的主体就是window。
//这里我们写两个自执行函数
~function(){
console.log(this); //->window
}();
(function (){
console.log(this);//->window
})();
3.当前函数执行就看前面有没有点(.),点前面是谁this就是谁,和当前函数在哪里定义的及在哪里执行的没有关系,没有点就是window.
还是一样的道理,.前面就表示当前行为执行的主体。如果没有依然当前行为执行的主体是window.
//定义一个函数
function hello(){
console.log(this);
}
hello();//this->window
//定义一个对象设置属性为hello值是对应的那个函数
Var obj = {hello:hello};
//我们再去调用的时候 发现是obj这个对象调用的这个函数 那么obj就是当前行为执行的主体 和这个函数在哪里定义是没有关系的。
Obj.hello(); //this->obj
4.call,apply,bind改变this指向问题就看方法中的第一个参数是谁this就是谁。
首先call,apply,bind这三个方法都是用来改变this的指向,其实本质就是改变当前行为执行的主体。由于这个三个方法第一个参数传递都是当前行为执行的主体。所以就看第一个参数即可。
//定义一个函数
function world(){
console.log(this);
}
//定义一个对象
Var obj = {name:”哈哈”};
//将obj变为这个方法行为执行的主体
World.call(obj);//this->obj
//apply和bind同理只是传递参数和使用方式略有不同
ES6中this的几种情况
1、箭头函数是没有自己this的,this是继承它的宿主环境(上级作用域) 宿主环境不是执行的环境,而是定义的环境。
let fn = () => {
console.log(this);
}
fn();//this->window
let obj = {
name: “obj”,
sum: function () {
fn(); //在widnow下定义的,所以它的宿主环境是widnow而不是sum
}
};
2、 ES6类构造器中的this是当前这个实例,而原型上的函数中的this指向调用者。
//类中的this
class Btn {
constructor(tagName) {
this.btn = document.querySelector(id);
thisthis.btn.onclick = this.click;
console.log(this); //this->这个类的实例
}
click() {
// 方法里的this指向调用者
console.log(this); //this->btn这个元素
}
}
var btn = new Btn(‘input’);
希望以上的分享能帮到大家。本文来自千锋教育,转载请注明出处。
Web前端基础知识:ES5及ES6this详解相关推荐
- Web前端基础知识整理
1. 前端基础知识 文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述 特点: 扩展名为.xml 内容区分大小写 标签要成对出现,形成容器,只能有一个 标签按正确 ...
- html clear属性值,【Web前端基础知识】clear使用方法
[摘要] 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页.下面是[Web前端基础知识]clear使用方法,小编建议有准备参加考试的备考生一定要合理规划时间,仔细阅读相关规定,提 ...
- [Python从零到壹] 八.数据库之MySQL和Sqlite基础知识及操作万字详解
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...
- 《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节
本节书摘来自异步社区<Web前端开发精品课--HTML5 Canvas开发详解>一书中的第1部分,第2章,作者:莫振杰 著,更多章节内容可以访问云栖社区"异步社区"公众 ...
- 前端基础-HTML的的标签详解
阅读目录 一.head内常用标签 二. HTML语义化 三. 字符实体 四. h系列标签 五. p标签 六. img标签 七. a标签 八. 列表标签 九. table标签 十. form标签 一. ...
- 纹理基础知识和过滤模式详解
转载自 纹理基础知识和过滤模式详解 1. 为什么在纹理采样时候需要 texture filter (纹理过滤) 我们的纹理 要贴到三维图形表面,而三维图形上的pixel中心与纹理上的texel中心并不 ...
- Web前端基础知识总结
一.HTML和CSS 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是pres ...
- Web 前端基础知识面试大全
目录 一.HTML 1.对 HTML 语义化的理解 2.区别:src 和 href 3.DOCTYPE 的作用 4.HTML5 的新特性 5.script 标签中的 defer 和 async 6. ...
- web前端基础知识查漏补缺,JavaScript面试题,赶紧收藏
1介绍js的基本数据类型 js一共六种基本数据类型,分别是 undefined null boolean number string ,还有es6新增的symbol 和 es10新增的bigint. ...
- WEB前端 基础知识汇总
javascript: JavaScript中如何检测一个变量是一个String类型?请写出函数实现 typeof(obj) === "string" typeof obj === ...
最新文章
- 【AI】吴恩达斯坦福机器学习中文笔记汇总
- 深入理解 Cache 工作原理
- java程序有连接数据库_Java程序连接数据库
- 宋体字体是什么_Win10 系统替换 macOS 苹方字体 - 瞬间提升文字清晰
- codeforces 932E Team Work 高等数学求导、dp
- 单页应用程序的Spring Boot静态Web资源处理
- 减治法解决八枚硬币问题/假币问题(JAVA)----二分,三分,不知轻重的情况
- 如何在苹果Mac中设置 Excel 文件打印范围刚好是一页纸?
- Atitit..组件化事件化的编程模型--(2)---------Web datagridview 服务器端控件的实现原理and总结
- windows网络编程
- 谷歌浏览器如何自动运行flash
- 朋友圈虚拟点赞+评论在线生成[可选头像+赞数+时间+随机电量信号]
- 华丽而实用的Java图表应用
- 我的十年 谨以此文迎接我即将到来的三十而立
- vertica资源管理
- JAVA的一些学习方法
- 【读书笔记】《价值投资的秘密》
- 3dsMax撤销不管用,3dsMax转成多边形之后无法撤回操作,3dsmax的操作步骤一直为空
- LeetCode344
- Java方法签名的定义