乐趣区

关于前端:ES5及ES6this详解

明天,咱们学习一下 JavaScript 中的 this。咱们从什么是 this,ES5 及 ES6 中 this 的几种状况进行学习。让 this 变的 so easy,咱们这里说的都是非严格模式下。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 和 www.sangpi.combind 同理只是传递参数和应用形式略有不同

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.>

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

}

click() {

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

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

}

}

var btn = new Btn(‘input’);

心愿以上的分享能帮到大家!

退出移动版