[Javascript] The "this" keyword
2015-08-20 02:15
597 查看
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.
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.
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.
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.
.bind()
.bind is almost the exact same thing as .call, except there's one thing that's different. It returns a new function.
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
When you use 'new' keyword, Javascript will auto create a 'this' keyword and assgin it as an object.
Window Binding
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
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.
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
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.
相关文章推荐
- JSON——JavaScript程序设计笔记(15)
- js模拟的静态私有变量
- JavaScript学习笔记——事件
- js正则匹配只能输入有效数字可加小数点
- javascript深入理解js闭包
- 错误处理与调试——JavaScript高级程序设计笔记(14)
- javascript如何操作HTML下拉列表标签
- js实现Select列表内容自动滚动效果代码
- JS给Textarea文本框添加行号的方法
- js图片翻书效果代码分享
- js代码实现无缝滚动(文字和图片)
- JS实现支持多选的遍历下拉列表代码
- JS实现的Select三级下拉菜单代码
- js实现文字在按钮上滚动的方法
- js实现按钮颜色渐变动画效果
- JS实现的通用表单验证插件完整实例
- js限制文本框的输入内容代码分享(3类)
- js变形金刚文字特效代码分享
- canvas导出为图片并用JS下载
- js 中{},[]中括号,大括号使用详解