Javascript this 关键字 详解

一、this指向构造函数实例化对象

在上篇文章中,我们提到了使用new和不使用new调用构造函数的区别,如下例:

代码如下:

当构造函数当做普通函数调用时,并没有返回值,同时this指向全局对象。那么我们如何来避免因为缺少new关键字,而产生的问题呢?

代码如下:

在上例中,我们首先检查this是否是Benjammin的实例,如果不是,使用new自动调用构造函数,并实例化,这意味着,我们不再需要担心,遗漏new关键字实例化构造函数。当然这样我们可能会养成一个坏的习惯,如果避免这种现象呢?我们可以抛出一个错误,像下面这样:

代码如下:

二、this指向调用函数的对象

看下面的例子:

代码如下:

三、this指向全局对象

在上面讨论构造函数的时候我们也讨论到不适用new的时候,this会指向全局对象,下面我们来看看两种常见的容易犯错的实例:

代码如下:
return this.x;
}
};
//Outputs: 10
console.log(obj.output());

在使用闭包的时候,作用域发生变化,this指向window(浏览器中)。

代码如下:

此时this始终指向函数调用时的对象。

四、this指向apply/call()方法指派的对象

代码如下:

五、callback函数內的this指向调用该callback的函数的this所指向的对象

代码如下:

六、Function.prototype.bind中的this

The bind() method creates a new function that,when called,has its this keyword set to the provided value,with a given sequence of arguments preceding any provided when the new function is called. 实例一:

代码如下:

实例二:

代码如下:

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...