<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数--this使用详情</title>
</head>
<body>
<script>
/*
javascript函数--this使用详情：
面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。
在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）。
ES2015 引入了箭头函数，箭头函数不提供自身的 this 绑定（this 的值将保持为闭合词法上下文的值）。
*/
/*
1.this指向全局对象
2.this指向所属对象
3.this.指向对象实例
4.this指向call（）函数、apply（）、bind（）函数调用后重新绑定的对象。
5.箭头函数
*/
//1.this指向全局对象或undefined
/*
当函数没有所属对象而直接调用时，this指向的是全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
*/
var value=10;
var obj ={
value:100,
method:function(){
var foo=function(){
console.log(this.value);//10
console.log(this);//Window对象
};
foo();
return this.value;
}
};
obj.method();
//严格模式
var obj1 ={
method:function(){
var foo=function(){
"use strict"; // 这里是严格模式
console.log(this);//undefined
};
foo();
return this.value;
}
};
obj1.method();
//2.this指向所属对象
/*
this指向调用对象
*/
//沿用上函数
/*obj.method()的返回值是this.value，method()的调用体为obj此时this指向obj，输出obj.value，输出100*/
console.log(obj.method());//100
//3.this.指向对象实例
/*
当通过new操作符调用构造函数生成对象的实例时，this指向该实例。
*/
//全局变量
var number=10;
function Person(){
//复写全局变量
number=20;
//实例变量
this.number=30;
}
//原型函数
Person.prototype.getNumber=function(){
return this.number;
};
//通过new操作符获取对象的实例
var p=new Person();
console.log(p.getNumber());//30
//4.this指向call（）函数、apply（）、bind（）函数调用后重新绑定的对象。（后有详解）
//4.1 call、apply（）
function add(c, d) {
return this.a + this.b + c + d;
}
var o = {a: 1, b: 3};
// 第一个参数是用作“this”的对象
// 其余参数用作函数的参数
add.call(o, 5, 7); // 16
// 第一个参数是用作“this”的对象
// 第二个参数是一个数组，数组中的两个成员用作函数参数
add.apply(o, [10, 20]); // 34
//4.2 bind
/*
ECMAScript 5 引入了 Function.prototype.bind()。
调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，
但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。
*/
function f(){
return this.a;
}
var g = f.bind({a:"azerty"});
console.log(g()); // azerty
var h = g.bind({a:'yoo'}); // bind只生效一次！
console.log(h()); // azerty
var o = {a:37, f:f, g:g, h:h};
console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty
//5.箭头函数
/*
在箭头函数中，this与封闭词法环境的this保持一致。
在全局代码中，它将被设置为全局对象
*/
var globalObject = this;
var foo = (() => this);
console.log(foo() === globalObject); // true
</script>
</body>
</html>
浙公网安备 33010602011771号