前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript入门总结第五弹——带你搞懂this

JavaScript入门总结第五弹——带你搞懂this

作者头像
萌兔IT
发布2019-07-25 14:09:48
3110
发布2019-07-25 14:09:48
举报
文章被收录于专栏:萌兔it萌兔it

Hello,小可爱们我又来了!今天的主题是一个非常困惑人的专题,this,想要弄清this的指向,也是一件不容易的事情。下面我们就开始正题了~~

this

1

this是什么

不同于其它面向对象语言this只表示当前对象的引用,在JavaScript中,this的指向不是固定不变的,而是会随着执行环境而改变的。

比如:this 可以表示方法所属对象;this 可以表示全局对象;this 可以是未定义的(undefined);this 可以表示接收事件的元素;this 也可以引用到任何对象。

2

方法所属对象

在对象方法中,当函数作为某个对象的方法调用时,this指向调用方法的对象;如果将函数值赋给某变量且没有立即执行的时候,this的值就要根据函数执行时所在环境进行判断,如下例子,rabbit1的执行环境就是全局

var color = "yellow"

var rabbit = { color: "white",

tail: "short",

style : function() { return this.color + " " + this.tail;

}

};

rabbit.style()//white short

var rabbit1 = rabbit.style

rabbit1()//yellow short

3

全局对象

全局作用域或者普通函数中this指向全局对象window

console.log(this)//window

function myRabbit () {

console.log(this)

}

myRabbit()//window

4

未定义的(undefined)

严格模式下函数没有绑定到this上,这时候this是undefined

"use strict";

function myRabbit() { console.log(this);

}

5

接收事件

在绑定HTML元素事件时,this指向接收事件的HTML元素

<button onclick="alert('Meo')">Click me</button>

6

对象绑定

call,apply

通过call或apply可以改变函数的调用对象,从而改变this的指向。this会绑定到call或apply的第一个参数上,不传参数,则绑定至全局。

这里call和apply作用相同,但是有一点点区别,那就是call的第二个及后续参数是一个参数列表,apply的第二个是一个数组,参数列表和参数数组都将作为函数的参数进行执行。

var x = 1;

var obj = {

x:2

}

function myRabbit() { console.log(this.x);

}

myRabbit.call(obj) //2

myRabbit.apply(obj) //2

myRabbit.call() //1

myRabbit.apply(null) //1

myRabbit.call(undefined) //1

bind

bind 方法会创建一个新函数,新函数的 this 会永久的指向 bind 传入的第一个参数。call, apply也不能改变。

var x = 1;

var obj = {

x:2

}

function myRabbit() { console.log(this.x);

}

var a = myRabbit.bind(obj)

myRabbit() //1

a() //2

7

构造函数调用

使用 new 关键字,通过构造函数生成一个实例对象。此时,this 便指向这个新对象。当构造函数返回对象时,this指向返回对象,如果返回非引用类型,则仍然指向实例话的新对象。

var x = 1;

function myRabbit() { this.x = 2;

}

var a = new myRabbit()

console.log(a.x) //2

8

箭头函数

ES6 新增的箭头函数不仅更加整洁,还对 this 的指向进行了改进。箭头函数会从作用域链的上一层继承 this。如下例子,obj.y()运行时,调用的对象是obj,this指向obj,y中的箭头函数继承y中的this,结果为2.将y赋值给a,y中的this指向全局对象,得到1。ps:call和apply也不能改变this的指向

var x = 1;

var obj = {

x: 2,

y:function(){

var myRabbit = () => {

console.log(this.x)

}

return myRabbit()

}

}

obj.y() //2

var a = obj.y

a() //1

好了,今天的内容就到此为止了,不知道小伙伴们有没有搞懂this的指向呢,喜欢兔妞的文章就请点击好看让更多人看到吧~~么么哒!

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-02-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 萌兔it 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档