This small issues we discuss three issues
The difference between (1) the object function and a normal function;
Who (2) of this function inside an object is in the end;
(3) object binding (apply and call).
1.3.1 distinguish objects function and a normal function
Simply put, the difference between the object function and a normal function is to have no keywords in this function. This is not an example we have a child, because the next issue is the question of who this is.
Who is this 1.3.2 object functions?
Who this is, it simply is the current object, then who is the current object, who point to this function, who is the current object of this function, no one point, the current object two cases, strict mode is a window global object, non-strict mode is undefined. On example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//'use strict'
var name = "MyWindow";
var age = 999;
function SayHello() {
Alert ( " I" + the this .name + ", this year's" + the this .age + " years old." );
}
was zhangsan = {
name: " Joe Smith" ,
age: 26,
ZhangsanSayHello: function () {
Alert ( " I" + the this .name + ", this year's" + the this .age + " years old." );
},
SayHello2: sayHello
}
zhangsan.ZhangsanSayHello (); // There is no doubt, this is zhangsan
zhangsan.SayHello2 (); // objects zhangsan point, this is zhangsan
The SayHello (); // strict mode is undefined, non-strict mode is a window
// strict; () //window.SayHello call the method mode
var Fn = zhangsan.ZhangsanSayHello;
Fn () // strict mode is undefined, non-strict mode is a window
() // strict //window.fn call the method mode
</script>
</head>
<body>
</body>
</html>
Since the objects are so hard to find, but also easy to find wrong, for safety, when calling object functions are all displayed objects indicate the most secure, even if the window is.
We know who this is that we look at a problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
'use strict'
var name = "MyWindow";
var age = 999;
was zhangsan = {
name: " Joe Smith" ,
age: 26,
ZhangsanSayHello: function () {
function SayHelloInner() {
Alert ( " I" + the this .name + ", this year's" + the this .age + " years old." );
}
SayHelloInner();
}
}
zhangsan.ZhangsanSayHello ();
</script>
</head>
<body>
</body>
</html>
Non-strict, and the result is the name window of Age, strict mode error.
This is embarrassing, indicates that the subject went to the ah why the global ah. Because SayHelloInner function is not specified object. Solutions are as follows.
Because this variable points to the object, then, if we put this variable points to solve the problem fixed soon.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
// 'use strict'
var name = "MyWindow";
var age = 999;
There liu = {
name: " John Doe" ,
age: 36,
}
was zhangsan = {
name: " Joe Smith" ,
age: 26,
ZhangsanSayHello: function () {
var that = this;
function SayHelloInner() {
Alert ( " I" + that.name + ", this year's" + that.age + " years old." );
}
SayHelloInner();
There that = lii;
SayHelloInner();
}
}
zhangsan.ZhangsanSayHello ();
</script>
</head>
<body>
</body>
</html>
In this code, we do not call this variable, but the object is fixed, such that and objLisi, so this will not be a mess, of course, reduces the flexibility of the code.
Of course, flexibility and control codes are not irreconcilable, the next section of the object binding is to solve the question of who is the object.
1.3.3 Object Binding
apply and control this call is directed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
'use strict'
var name = "MyWindow";
var age = 999;
There liu = {
name: "lisi",
age:36
}
was zhangsan = {
name: " Joe Smith" ,
age: 26,
ZhangsanSayHello: function () {
function SayHelloInner() {
Alert ( " I" + the this .name + ", this year's" + the this .age + " years old." );
}
SayHelloInner.apply(this);
}
}
zhangsan.ZhangsanSayHello (); // the this zhangsan time
var Fn = zhangsan.ZhangsanSayHello;
fn.apply (lisi); this // shi Lisi is a
fn.call ( the this ); // the this is a global object window
fn.call (window); // see this afraid, you can display the specified window
</script>
</head>
<body>
</body>
</html>
