On the this problem in function
I am a newcomer to js, this is an example in knockout.js
html
First name: <input data-bind="value: firstName" />
Last name: <input data-bind="value: lastName" />
Full name: <strong data-bind="text: fullName"></strong>
Js
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
this.fullName = ko.computed(function(){
return this.firstName() + " " + this.lastName();
},this);
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
I don"t quite understand the function of the last this of function in fullName, the parameter of function. Or something?
who does it point to? How can you understand this sentence thoroughly?
I often can"t understand the behavior of adding parameters directly after anonymous function () {}. Is there any good article about it?
Thank you
about this , I have described in detail in JavaScript 's this pointing problem depth parsing , so I won't repeat it here.
specific to this question, it's about the API, of ko.computed () . Take a look at the excerpt from official document :
Managing 'this'
The second parameter to ko.computed (the bit where we passed this in the above example) defines the value of this when evaluating the computed observable. Without passing it in, it would not have been possible to refer to this.firstName () or this.lastName () . Experienced JavaScript coders will regard this as obvious, but if you're still getting to know JavaScript it might seem strange. (Languages like C-sharp and Java never expect the programmer to set a value for this , but JavaScript does, because its functions themselves aren't part of any object by default.)
The second parameter of
ko.computed specifies the
this when executing the computed viewer function.
so the this passed in ko.computed (function () {.}, this) is the this used in function () {.} , that is, the this of this.firstName () and this.secondName () . That is, this in the AppViewModel scope.
this is actually the basis of js functions. You need a red treasure book (Javascript Advanced programming), Function section
1.) To understand where the this points here, you only need to understand what happens after the function is used as the constructor, that is, after the new keyword
2. In fact, the this here points to the object from AppViewModel new. You can refer to https://developer.mozilla.org.
3.. An anonymous function is a function, but this function does not need to be called anywhere else, so it does not need to have a name. In JavaScript, the function is a first-class citizen and an object, and can be passed
as an argument.
Brother that function is called self-executing function format (function () {}) (), which is a general format. Now there is es6, so it can also be written as:
(() = > {}) () arrow function. As for what you said about this pointing, I think you have to systematically learn that this points to window, to the current object, and to the current function. The this in the callback function points to window.
