首页 > 其他分享> 文章详细

es5和es6的区别是什么?

2021-06-18 12:35:59 阅读：252 来源： 互联网

标签：es6 es5 obj log 区别 window console 执行函数

么是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是当前这个实例，而原型上的函数中的thiswww.diuxie.com指向调用者。

　　//类中的this

　　class Btn {

　　constructor(tagName) {

　　this.btn = document.querySelector(id);

　　thisthis.btn.>

　　console.log(this); //this->这个类的实例

　　}

　　click() {

　　// 方法里的this指向调用者

　　console.log(this); //this->btn这个元素

　　}

　　var btn = new Btn('input');

　　希望以上的分享能帮到大家！

标签：es6,es5,obj,log,区别,window,console,执行,函数
来源： https://www.cnblogs.com/a252625/p/14899003.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

es5和es6的区别是什么?