It's safe to say that the this
keyword is probably one of the misunderstood parts of JavaScript. Admittedly, I used to throw the this
keyword around until my script worked and it confused the hell out of me (and still does many other JS developers) around the world. Only when I learned about lexical scope, how functions are invoked, scope context, a few context changing methods - I really understood it.
Before you dive into this article, here's a few very important points to takeaway and remember about the this
keyword:
- The
this
keyword's value has nothing to do with the function itself, how the function is called determines thethis
value - It can be dynamic, based on how the function is called
- You can change the
this
context through.call()
,.apply()
and.bind()
Default this
context
There are a few different ways the this
value changes, and as we know it's usually the call-site that creates the context.
Window Object, global scope
Let's take a quick example at how simply calling regular functions binds the this
value differently:
// define a function
var myFunction = function () {
console.log(this);
};
// call it
myFunction();
What can we expect the this
value to be? By default, this should always be the window
Object, which refers to the root - the global scope. So when we console.log(this);
from our function, as it's invoked by the window (simply just called), we should expect the this
value to be our window
Object:
// define a function
var myFunction = function () {
console.log(this); // [object Window]
};
// call it
myFunction();
Object literals
Inside Object literals, the this
value will always refer to it's own Object. Nice and simple to remember. That is good news when invoking our functions, and one of the reasons I adopt patterns such as the module pattern for organising my objects.
Here's how that might look:
// create an object
var myObject = {};
// create a method on our object
myObject.someMethod = function () {
console.log(this);
};
// call our method
myObject.someMethod();
Here, our window
Object didn't invoke the function - our Object did, so this
will refer to the Object that called it:
// create an object
var myObject = {};
// create a method on our object
myObject.someMethod = function () {
console.log(this); // myObject
};
// call our method
myObject.someMethod();
Prototypes and Constructors
The same applies with Constructors:
var myConstructor = function () {
this.someMethod = function () {
console.log(this);
};
};
var a = new myConstructor();
a.someMethod();
And we can add a Prototype Object as well:
var myConstructor = function () {
this.someMethod = function () {
console.log(this);
};
};
myConstructor.prototype = {
somePrototypeMethod: function () {
console.log(this);
}
};
var a = new myConstructor();
a.someMethod();
a.somePrototypeMethod();
Interestingly, in both cases the this
value will refer to the Constructor object, which will bemyConstructor
.
Events
When we bind events, the same rule applies, the this
value points to the owner. The owner in the following example would be the element.
// let's assume .elem is <div class="elem"></div>
var element = document.querySelector('.elem');
var someMethod = function () {
console.log(this);
};
element.addEventListener('click', someMethod, false);
Here, this
would refer to <div class="elem"></div>
.
Dynamic this
The second point I made in the intro paragraph was that this
is dynamic, which means the value could change. Here's a real simple example to show that:
// let's assume .elem is <div class="elem"></div>
var element = document.querySelector('.elem');
// our function
var someMethod = function () {
console.log(this);
};
// when clicked, `this` will become the element
element.addEventListener('click', someMethod, false); // <div>
// if we just invoke the function, `this` becomes the window object
someMethod(); // [object Window]
Changing this
context
There are often many reasons why we need to change the context of a function, and thankfully we have a few methods at our disposal, these being .call()
, .apply()
and .bind()
.
Using any of the above will allow you to change the context of a function, which in effect will change the this
value. You'll use this when you want this
to refer to something different than the scope it's in.
Using .call()
, .apply()
and .bind()
"Functions are first class Objects" you'll often hear, this means they can also have their own methods!
The .call()
method allows you to change the scope with a specific syntax ref:
.call(thisArg[, arg1[, arg2[, ...]]]);
Usage would look something like this:
someMethod.call(anotherScope, arg1, arg1);
You'll notice further arguments are all comma separated - this is the only difference between .call()
and.apply()
:
someMethod.call(anotherScope, arg1, arg1); // commas
someMethod.apply(anotherScope, [arg1, arg1]); // array
With any of the above, they immediately invoke the function. Here's an example:
var myFunction = function () {
console.log(this);
};
myFunction.call();
Without any arguments, the function is just invoked and this
will remain as the window
Object.
Here's a more practical usage, this script will always refer to the window
Object:
var numbers = [{
name: 'Mark'
},{
name: 'Tom'
},{
name: 'Travis'
}];
for (var i = 0; i < numbers.length; i++) {
console.log(this); // window
}
The forEach
method also has the same effect, it's a function so it creates new scope:
var numbers = [{
name: 'Mark'
},{
name: 'Tom'
},{
name: 'Travis'
}];
numbers.forEach(function () {
console.log(this); // window
});
We could change each iteration's scope to the current element's value inside a regular for
loop as well, and use this
to access object properties:
var numbers = [{
name: 'Mark'
},{
name: 'Tom'
},{
name: 'Travis'
}];
for (var i = 0; i < numbers.length; i++) {
(function () {
console.log(this.name); // Mark, Tom, Travis
}).call(numbers[i]);
}
This is especially extensible when passing around other Objects that you might want to run through the exact same functions.
forEach scoping
Not many developers using forEach
know that you can change the initial scope context via the second argument:
numbers.forEach(function () {
console.log(this); // this = Array [{ name: 'Mark' },{ name: 'Tom' },{ name: 'Travis' }]
}, numbers); // BOOM, scope change!
Of course the above example doesn't change the scope to how we want it, as it changes the functions scope for every iteration, not each individual one - though it has use cases for sure!
To get the ideal setup, we need:
var numbers = [{
name: 'Mark'
},{
name: 'Tom'
},{
name: 'Travis'
}];
numbers.forEach(function (item) {
(function () {
console.log(this.name); // Mark, Tom, Travis
}).call(item);
});
.bind()
Using .bind()
is an ECMAScript 5 addition to JavaScript, which means it's not supported in all browsers (but can be polyfilled so you're all good if you need it). Bind has the same effect as .call()
, but instead binds the function's context prior to being invoked, this is essential to understand the difference. Using .bind()
will notinvoke the function, it just "sets it up".
Here's a really quick example of how you'd setup the context for a function, I've used .bind()
to change the context of the function, which by default the this
value would be the window Object.
var obj = {};
var someMethod = function () {
console.log(this); // this = obj
}.bind(obj);
someMethod();
This is a really simple use case, they can also be used in event handlers as well to pass in some extra information without a needless anonymous function:
var obj = {};
var element = document.querySelector('.elem');
var someMethod = function () {
console.log(this);
};
element.addEventListener('click', someMethod.bind(obj), false); // bind
"Jumping scope"
I call this jumping scope, but essentially it's just some slang for accessing a lexical scope reference (also a bit easier to remember...).
There are many times when we need to access lexical scope. Lexical scope is where variables and functions are still accessible to us in parent scopes.
var obj = {};
obj.myMethod = function () {
console.log(this); // this = `obj`
};
obj.myMethod();
In the above scenario, this
binds perfectly, but what happens when we introduce another function. How many times have you encountered a scope challenge when using a function such as setTimeout
inside another function? It totally screws up any this
reference:
var obj = {};
obj.myMethod = function () {
console.log(this); // this = obj
setTimeout(function () {
console.log(this); // window object :O!!!
}, 100);
};
obj.myMethod();
So what happened there? As we know, functions create scope, and setTimeout
will be invoked by itself, defaulting to the window
Object, and thus making the this
value a bit strange inside that function.
Important note: this
and the arguments
Object are the only objects that don't follow the rules of lexical scope.
How can we fix it? There are a few options! If we're using .bind()
, it's an easy fix, note the usage on the end of the function:
var obj = {};
obj.myMethod = function () {
console.log(this); // this = obj
setTimeout(function () {
console.log(this); // this = obj
}.bind(this), 100); // .bind() #ftw
};
obj.myMethod();
We can also use the jumping scope trick, var that = this;
:
var obj = {};
obj.myMethod = function () {
var that = this;
console.log(this); // this = obj
setTimeout(function () {
console.log(that); // that (this) = obj
}, 100);
};
obj.myMethod();
We've cut the this
short and just simply pushed a reference of the scope into the new scope. It's kind of cheating, but works wonders for "jumping scope". With newcomers such as .bind()
, this technique is sometimes frowned upon if used and abused.
One thing I dislike about .bind()
is that you could end up with something like this:
var obj = {};
obj.myMethod = function () {
console.log(this);
setTimeout(function () {
console.log(this);
setTimeout(function () {
console.log(this);
setTimeout(function () {
console.log(this);
setTimeout(function () {
console.log(this);
}.bind(this), 100); // bind
}.bind(this), 100); // bind
}.bind(this), 100); // bind
}.bind(this), 100); // bind
};
obj.myMethod();
A tonne of .bind()
calls, which look totally stupid. Of course this is an exaggerated issue, but it can happen very easily when switching scopes. In my opinion this would be easier - it will also be tonnes quicker as we're saving lots of function calls:
var obj = {};
obj.myMethod = function () {
var that = this; // one declaration of that = this, no fn calls
console.log(this);
setTimeout(function () {
console.log(that);
setTimeout(function () {
console.log(that);
setTimeout(function () {
console.log(that);
setTimeout(function () {
console.log(that);
}, 100);
}, 100);
}, 100);
}, 100);
};
obj.myMethod();
Do what makes sense!
jQuery $(this)
Yes, the same applies, don't use $(this)
unless you actually know what it's doing. What it is doing is passing the normal this
value into a new jQuery Object, which will then inherit all of jQuery's prototypal methods (such as addClass), so you can instantly do this:
$('.elem').on('click', function () {
$(this).addClass('active');
});
Happy scoping ;)
Understanding the “this” keyword in JavaScript
“This” in JavaScript
相关推荐
机械设计同轴剥皮机sw18可编辑非常好的设计图纸100%好用.zip
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
Honeywell BR-310 条形码扫描器手册
中国诗词APP「西窗烛」产品需求文档
当然可以!Unity开发是一个非常受欢迎的游戏开发工具,适合初学者入门。以下是一些Unity开发的教程,供您参考: 1. Unity官方文档:Unity官方网站提供了详细的文档和教程,包括Unity的基本概念、工具使用、场景编辑、游戏逻辑编写等。您可以根据自己的需求和水平选择相应的教程。 2. Unity官方的Unity Creator在线课程:Unity Creator是Unity的在线教育平台,提供了许多免费的Unity Creator教程和课程,适合初学者入门。您可以根据教程的内容和难度选择适合自己的课程。 3. Unity中文社区:Unity中文社区是一个非常活跃的社区,提供了许多Unity开发的教程和资源。您可以搜索相关的教程和资源,与其他开发者交流和学习。 4. Unity教程网站:有许多网站提供了Unity开发的教程和资源,如游戏学院、编程教室等。这些网站提供了许多基础和进阶的Unity开发教程,适合初学者和有一定基础的开发者。 5. Unity插件开发:Unity插件开发是Unity开发的一个重要方向,适合有一定基础的开发者。您可以学习如何创建自定义的Unity插件,
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
惠普服务器安装说明
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
附件是一个简单的烟花效果的代码示例。 在Python中,可以使用多种方式来模拟烟花效果,其中一种常用的方法是使用turtle模块,它提供了一个画布和一个小海龟,可以用来绘制各种图形。 这段代码首先导入了turtle模块和random模块,然后在屏幕上绘制了10次烟花爆炸的效果。每次爆炸都是由5个小圆组成,颜色随机选择,圆的大小也是随机的。 请注意,这段代码需要在支持turtle模块的Python环境中运行,并且需要有图形界面的支持。如果你在没有图形界面的环境中(比如某些服务器或者命令行界面),这段代码可能无法正常运行。
基于MATLAB和Simulink通过正运动学和逆运动学设计了PID控制器.zip基于MATLAB和Simulink通过正运动学和逆运动学设计了PID控制器.zip基于MATLAB和Simulink通过正运动学和逆运动学设计了PID控制器.zip基于MATLAB和Simulink通过正运动学和逆运动学设计了PID控制器.zip基于MATLAB和Simulink通过正运动学和逆运动学设计了PID控制器.zip基于MATLAB和Simulink通过正运动学和逆运动学设计了PID控制器.zip
基于深度学习的声学回声消除基线代码 # 数据准备 按照以下文件结构,放好语音,我直接使用的是AEC-Challenge 数据集中的合成数据集 ```angular2html └─Synthetic ├─TEST │ ├─echo_signal │ ├─farend_speech │ ├─nearend_mic_signal │ └─nearend_speech ├─TRAIN │ ├─echo_signal │ ├─farend_speech │ ├─nearend_mic_signal │ └─nearend_speech └─VAL ├─echo_signal ├─farend_speech ├─nearend_mic_signal └─nearend_speech ``` 数据处理脚本为 `data_preparation.py`
Dell Edge Gateway 3002 安装和操作手册
88888888888.mp3
环境说明: 开发语言:java 框架:springboot,vue JDK版本:JDK1.8 数据库:mysql5.7+(推荐5.7,8.0也可以) 数据库工具:Navicat11+ 开发软件:idea/eclipse(推荐idea) Maven包:Maven3.3.9+
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
KR-18 y KR-24 INSTALACIÓN INTRODUCCIÓN KR-18 和 KR-24 安装说明
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
Qt开发是一种使用Qt库进行应用程序开发的强大技术。Qt是一个跨平台的C++应用程序开发框架,它提供了许多用于创建图形用户界面(GUI)和网络应用程序的工具。 以下是一个简单的Qt开发教程,它涵盖了Qt的主要概念和基本步骤: **步骤1:安装Qt** 首先,你需要安装Qt库。你可以从Qt官方网站下载并安装它。安装完成后,你还需要安装一些开发工具,如Qt Creator。 **步骤2:创建你的第一个Qt项目** 在Qt Creator中创建一个新的项目。你可以选择创建一个简单的窗口应用程序,这将为你提供一个基本的框架来开始你的开发工作。 **步骤3:理解Qt的基本概念** 理解Qt的基本概念是学习Qt开发的关键。这些概念包括窗口、控件、布局、信号和槽等。理解这些概念将帮助你更好地理解如何使用Qt库来创建GUI应用程序。 **步骤4:学习布局系统** Qt的布局系统允许你轻松地管理窗口中的控件位置。理解布局系统将帮助你创建具有整洁和一致外观的GUI应用程序。 **步骤5:使用信号和槽** 信号和槽是Qt中用于处理事件和交互的主要机制。学习如何使用信号和槽来连接控件的行
一体式离子传感器 用户手册 一体式离子传感器 用户手册 (485 型) PR-3003-*-N01-* Ver 1.0