接下来要总结的是this,学过JS的都知道this都知道它的重要性。
前面也放过这张图了,这是执行上下文的生命周期。再来瞧瞧,这次的主角轮到this了。
一个很重要结论:this指向,是在函数被调用的时候确定的。也就是执行上下文被创建时被确定的。
先来个例子压压惊:同一个函数由于调用的方式不同,this指向了不一样的对象。
var a = 10;
var obj = {
a: 20
}
function fn () {
console.log(this.a);
}
fn(); // 10
fn.call(obj); // 20
除此之外,在函数执行过程中,this一旦被确定,就不可更改了。
var a = 10;
var obj = {
a: 20
}
function fn () {
this = obj; // 这句话试图修改this,运行后会报错
console.log(this.a);
}
fn();
全局对象的this,是一个比较特殊的存在。全局对象中的this,指向它本身,也就是window。
// 通过this绑定到全局对象
this.a2 = 20;
// 通过声明绑定到变量对象,但在全局环境中,变量对象就是它自身
var a1 = 10;
// 仅仅只有赋值操作,标识符会隐式绑定到全局对象
a3 = 30;
在一个函数上下文中,this由调用者提供,由调用函数的方式来决定。如果调用的函数,被某一个对象所拥有,那么该函数在调用时,内部的this的值指向该对象。如果函数独立调用,那么该函数内部的this,则指向undefined。在非严格模式中,当this指向undefined时,它会自动指向全局对象(window)。
// demo01
var a = 20;
function fn() {
console.log(this.a);
}
fn();// 20
// demo02
var a = 20;
function fn() {
function foo() {
console.log(this.a);
}
foo();
}
fn();// 20
// demo03
var a = 20;
var obj = {
a: 10,
c: this.a + 20,
fn: function () {
return this.a + 20;
}
}
console.log(obj.c);// 40
console.log(obj.fn());// 30
这里需要注意的地方是:单独的{}
是不会形成新的作用域,由于没有别的作用域的限制,所以还是处于全局作用域。这里的this还是表示全局对象(即window对象),this.a
的值为20。
函数中的this,要准确确定this的指向,找到函数的调用者以及区分它是否独立调用就变得十分关键。
看下面的一个例子
// 为了能够准确判断,我们在函数内部使用严格模式,因为非严格模式会自动指向全局
function fn() {
'use strict';
console.log(this);
}
fn(); // fn是调用者,独立调用
window.fn(); // fn是调用者,被window所拥有
上面的例子,fn()作为独立的调用者,this的指向是undefined;而window.fn()则被window所拥有,所以this的指向是window。
很特别的一个例子
function foo() {
console.log(this.a)
}
function active(fn) {
fn(); // 真实调用者,为独立调用
}
var a = 20;
var obj = {
a: 10,
getA: foo
}
active(obj.getA);
JS提供的可以手动设置this的指向的方法。所有函数都具有两个方法。
function fn() {
console.log(this.a);
}
var obj = {
a: 20
}
fn.call(obj);// 20
function fn(num1, num2) {
console.log(this.a + num1 + num2);
}
var obj = {
a: 20
}
fn.call(obj, 100, 10); // 130
fn.apply(obj, [20, 10]); // 50
// 将类数组对象转化为数组
function exam() {
// 先看看函数的自带属性 arguments 什么是样子的
console.log(arguments);
// 使用call/apply将arguments转换为数组, 返回结果为数组,arguments自身不会改变
var arg = [].slice.call(arguments);
console.log(arg);
}
exam(2, 8, 9, 10, 3);
// result:
// { '0': 2, '1': 8, '2': 9, '3': 10, '4': 3 }
// [ 2, 8, 9, 10, 3 ]
//
// 也常常使用该方法将DOM中的nodelist转换为数组
// [].slice.call( document.getElementsByTagName('li') );
// 根据自己的需要灵活修改this指向
var foo = {
name: 'joker',
showName: function() {
console.log(this.name);
}
}
var bar = {
name: 'rose'
}
foo.showName.call(bar);
// 实现继承
// 定义父级的构造函数
var Person = function(name, age) {
this.name = name;
this.age = age;
this.gender = ['man', 'woman'];
}
// 定义子类的构造函数
var Student = function(name, age, high) {
// use call
Person.call(this, name, age);
this.high = high;
}
Student.prototype.message = function() {
console.log('name:'+this.name+', age:'+this.age+', high:'+this.high+', gender:'+this.gender[0]+';');
}
new Student('xiaom', 12, '150cm').message();
// result
// ----------
// name:xiaom, age:12, high:150cm, gender:man;
// 在向其他执行上下文的传递中,确保this的指向保持不变
// one
var obj = {
a: 20,
getA: function() {
var self = this;
setTimeout(function() {
console.log(self.a)
}, 1000)
}
}
// two
function bind(fn, obj) {
return function() {
return fn.apply(obj, arguments);
}
}
var obj = {
a: 20,
getA: function() {
setTimeout(bind(function() {
console.log(this.a)
}, this), 1000)
}
}
obj.getA();
// three
var obj = {
a: 20,
getA: function() {
setTimeout(function() {
console.log(this.a)
}.bind(this), 1000)
}
}
一个很特别的例子
var n = 'hello world!';
function example() {
console.log(this.n);
}
var o = {};
o.n = 'hey~';
o.m = example;
o.m.apply(); // hello world!
// o.m.apply(null); // hello world!
// 单纯地调用 o.m(); 此时输出是hey~
当apply()的参数为空(或者为null)时,就是没有对象去替换掉当前的对象,所以默认调用全局对象。因此,这时会输出’hello world!’,证明this指的是全局对象。
this是在函数被调用时被确定的,这一点是毋庸置疑的。
现在有一个构造函数,我们使用构造函数去创建新对象的过程是这样的 —— 通过new操作符调用构造函数,经历四个阶段