this是Javascript语言的一个关键字。
它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比如,
function test(){
this.x = 1;
}
随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。
下面分四种情况,详细讨论this的用法。
情况一:纯粹的函数调用
这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。
请看下面这段代码,它的运行结果是1。
function test(){
this.x = 1;
alert(this.x);
}
test(); // 1
为了证明this就是全局对象,我对代码做一些改变:
var x = 1;
function test(){
alert(this.x);
}
test(); // 1
运行结果还是1。再变一下:
var x = 1;
function test(){
this.x = 0;
}
test();
alert(x); //0
情况二:作为对象方法的调用
函数还可以作为某个对象的方法调用,这时this就指这个上级对象。
function test(){
alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m(); // 1
情况三 作为构造函数调用
所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。
function test(){
this.x = 1;
}
var o = new test();
alert(o.x); // 1
运行结果为1。为了表明这时this不是全局对象,我对代码做一些改变:
var x = 2;
function test(){
this.x = 1;
}
var o = new test();
alert(x); //2
运行结果为2,表明全局变量x的值根本没变。
情况四 apply调用
apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是这第一个参数。
var x = 0;
function test(){
alert(this.x);
}
var o={};
o.x = 1;
o.m = test;
o.m.apply(); //0
apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。
如果把最后一行代码修改为
o.m.apply(o); //1
运行结果就变成了1,证明了这时this代表的是对象o。
本文转载自:http://937136979.iteye.com/blog/2422199
相关推荐
在本话题中,我们将深入探讨JavaScript中的类继承,并特别关注`this.callParent`这个方法,它是如何被用来调用超类方法的。 首先,让我们了解JavaScript中的构造函数。构造函数是一种特殊的函数,用于创建和初始化...
`this.$set` 是 Vue 提供的一个全局方法,用于向响应式对象中添加新属性并确保该属性能触发视图更新。 案例中的代码展示了如何使用 `this.$set` 绑定不同类型的动态数据: 1. **单个数据绑定**: 在 `<template>`...
Vue.js 是一款流行的前端框架,用于构建用户界面。在 Vue 开发过程中,有时我们需要修改数据并期望视图能够...了解它们的工作原理和正确使用方法,能够避免出现预期外的视图更新问题,提高Vue应用的健壮性和用户体验。
在Vue.js中,`this.$options.data()` 和 `this.$data` 都是用来处理组件数据的,但它们的使用场景和行为有所不同。这个问题涉及到Vue实例的生命周期和数据绑定的原理。 首先,`this.$options.data()` 返回的是组件...
在本文中,我们将深入探讨`this`在JavaScript中的工作原理,以及在不同场景下的用法。 1. **函数调用方式** 在函数调用中,`this`的值取决于函数被调用的方式。如果函数是作为对象的方法调用,`this`将指向调用该...
这是因为在JavaScript中,回调函数可能会丢失原来的this上下文,特别是在异步操作中,如Promise的.then()方法。 3. Vue实例生命周期影响 有时候,如果this.$router.push被调用的时机不符合Vue的生命周期,它可能...
JavaScript中的`this`关键字是一个非常重要的概念,它在不同上下文中具有不同的指向,这使得`this`成为JavaScript灵活但有时也复杂的一部分。`this`的动态绑定特性在编写JavaScript代码时需要特别注意,因为它会影响...
### JavaScript 中 `this` 的用法详解 #### 一、引言 在 JavaScript 开发过程中,`this` 关键字的使用常常令开发者感到困惑。这是因为 `this` 的值并不是静态确定的,而是取决于函数调用的方式。了解 `this` 的...
js原生态函数中使用jQuery中的$(this)无效的解决方法 在JavaScript开发中,使用jQuery的$(this)在原生态函数中可能会出现无效的问题,本文将对此进行详细的分析和解决方法的介绍。 一、问题描述 在JavaScript开发...
在Vue.js框架中,`this.$set` 是一个关键的方法,用于处理响应式数据更新的问题。在某些情况下,当你尝试直接修改对象的属性或数组的元素时,Vue可能无法检测到这些变化,进而不会自动更新视图。`this.$set` 方法...
在这种情况下,可以使用`this.$set`方法来添加响应式的属性,如`this.$set(this.someObject, 'b', 2)`。 接下来,我们要讨论的是Vue的异步更新队列。Vue不会立即更新DOM,而是将所有在同一个事件循环中发生的多个...
在《You Don't Know JS: this & Object Prototypes》一书中,作者Kyle Simpson深入探讨了JavaScript中的`this`关键字和对象原型机制。这本书不仅适合JavaScript新手,也适用于那些希望更深入理解语言核心特性的有...
总结来说,在javascript中,onclick(this)的用法主要是将当前被点击的元素作为上下文对象传递给事件处理函数。在事件处理函数内部,我们可以访问到这个对象的所有属性和方法,从而实现对事件的处理和响应。通过这种...
为了更直观地理解GPU.js如何工作,我们可以通过一个简单的乘法示例来演示其使用方法。 ##### 1. 安装GPU.js 首先,你需要安装GPU.js。对于Node.js项目,可以通过以下命令进行安装: ```bash npm install gpu.js -...
从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 二、axios的使用:安装axios:cnpm install ...
1.print.js // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint'...
在实际应用中,"printThis" 插件的使用方法可能包括以下步骤: 1. **引入依赖**:首先,你需要在HTML文件中引入jQuery库,因为"printThis"依赖于jQuery。通常,这可以通过在`<head>`标签内添加链接到jQuery库的CDN...
文档中对于每个函数或属性都有详尽的介绍和代码示例,比如this.$store和this.$route的使用方法和最佳实践。正确阅读和理解官方文档,可以帮助开发者快速定位问题,并找到解决方案。 综上所述,当在Vue中使用this.$...