[Javascript] The "this" keyword
The very first thing to understand when we're talking about this-keyword is really understand what's the purpose of the this-keyword is, or why we even have this-keyword in JavaScript.
What the this-keyword allows us to do, is it allows us to reuse functions with different contexts, or in other words it allows us to decide which objects should be focal when invoking a function or a methods. Imagine we had one function, and we had a bunch of objects that had similar properties, we want that function to work throughout all of our objects.
The first thing you need to ask yourself whenever you're trying to figure out what the this-keyword is, is this question. Where is this function invoked? We won't know what the this-keyword is in a function until that function is invoked.
There are four this keyword binding:
- Implicit Binding
- Explicit Binding
- New Binding
- Window Binding
- Implicit Binding
Implicit binding says that when you call a function and when the function is invoked, look to the left of the dot, and that is what the this-keyword is going to reference.
var me = { name: "Wan", age: 26, sayName: function(){ console.log(this.name); } } me.sayName();
var sayNameMixin = function(obj){ obj.sayName = function(){ console.log(this.name); } } var you = { name: "Zhenitan", age: 27 } sayNameMixin(me); sayNameMixin(you); me.sayName(); //wan you.sayName(); //Zhentian
var Person = function(name, age){ return { name: name, age: age, sayName: function(){ console.log(this.name); }, mother: { name: "Yun", sayName: function(){ console.log(this.name); } } } } var jim = Person('Jim', 42); jim.sayNmae(); // Jim jim.mother.sayNmae(); //Yun
you're going to find that whenever you get in these situation of trying to figure out what the this-keyword is, the very first thing you should do is look at when the function was invoked, and look if there's anything to the left of the dot, because if there is, that's what this-keyword is referencing.
- Explicit Binding
.call()
What if we were to take SayName out of this function? Instead of being a method on the object, now, it's just a function currently on the global scope. Now, what we want to do is we want to somehow call this function in the context of wan. What we can do is if we type the function name, every function has a .call property that allows us to do just that.
var sayName = function(){ console.log(this.name); } var wan = { name: "Wan", age: 27 }; sayName.call(wan);
let's go ahead and say if we wanted to pass a parameter, pass a few more arguments to SayName, what we can do is, let's say we had an array of languages.
var sayName = function(lang1, lang2, lang3){ console.log("My name is "+ this.name + ', and I know' + lang1 + ', '+ lang2 + ', '+ lang3); } var wan = { name: "Wan", age: 27 }; var languages = ['Javascript', 'Ruby', 'Python']; sayName.call(wan, languages[0], languages[1], languages[2]);
What we can do here in .call, the very first argument you pass is the context, and every argument after that is going to be passed to the function, just as a normal argument.
.apply()
It would be nicer if we could just pass in languages, and some feature in the language of JavaScript would be able to parse these out to us.
var sayName = function(lang1, lang2, lang3){ console.log("My name is "+ this.name + ', and I know' + lang1 + ', '+ lang2 + ', '+ lang3); } var wan = { name: "Wan", age: 27 }; var languages = ['Javascript', 'Ruby', 'Python']; sayName.apply(wan, languages);
.bind()
.bind is almost the exact same thing as .call, except there's one thing that's different. It returns a new function.
var sayName = function(lang1, lang2, lang3){ console.log("My name is "+ this.name + ', and I know' + lang1 + ', '+ lang2 + ', '+ lang3); } var wan = { name: "Wan", age: 27 }; var languages = ['Javascript', 'Ruby', 'Python']; var newFn = sayName.bind(wan, languages[0],languages[1],languages[2]); newFn();
To reacp, .call, apply and bind allow us to specifically state what this keyword will be within any given function. .call and .apply behave the same way, they will immediatelyh invoke that funciton, but with .call, you pass in arguments one by one, and with .apply, you pass them in as an array. .bind is the exact same thing as .call, but execpt for immediately invoking the function, it's going to return you a brand new function that you can invoke later.
- New Binding
var Animal = function(name, age){ // this = {}; this.name = name; this.age = age; }; var dog = new Animal('Zippy', 3);
When you use 'new' keyword, Javascript will auto create a 'this' keyword and assgin it as an object.
- Window Binding
1 2 3 4 5 6 7 | var greeting = function (){ console.log( this .message); } greeting(); //undefined window.message = "Hello" ; greeting(); //"Hello" |
In the console, we want to log out 'this.message', but we didn't use implict binding, so it shows undefined.
In javascript, if none of above three methods applyed, 'this' keyword will refer to the 'window' object, so if we assign
window.message = "Hello"
in greeting() will log out Hello.
To recap all our rules, we have implicit binding, which is you look to the left of the dot, at call time, explicit binding, which is telling a function what the context of the this keyword is going to be using call, apply, or bind.
The new binding is whenever you have a function invoked with the new keyword, the this keyword is bound to the new object being constructed. Then the Window binding where if none of these rules apply, then the this keyword is going to default to the Window object unless you're in strict mode. Then it's just going to be undefined.
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具