JavaScript面向对象中的this关键字个人分享

this关键字

this关键字描述

• this本身没有任何含义,但它也可以代表任何含义
• this被自动定义在所有的"函数"作用域中
• this都有一个共同点,它总是要返回一个对象
• this指向哪个对象,不取决于定义在哪,它取决于调用位置
• 注意: 建议搞不明白时尽量不要使用否则会很混乱,一定要理解之后使用

---

this的基本用法

• 表示在函数中使用this，在调用该函数时，this没有具体的指向目标，会默认为this指向全局对象

示例代码:

// 定义一个全局变量
var v = 100;
// this经常被定义在函数的作用域中
function fn() {
    // this总是要返回一个对象
    console.error(this.v);// this指向哪个对象,不取决于函数定义的位置
}
// this指向哪个对象,取决于调用的位置
// fn();// 函数的调用


// 定义一个对象,将fn函数作为obj对象的方法
var obj = {
    v : 200,
    f : fn
};
// obj.f();
console.error(this.v);

代码分析图:

---

隐式绑定丢失

• 隐式绑定丢失需要注意的是: 将一个指定对象中的指定方法赋值给一个全局变量，在调用全局变量时，this将从原本指向具体对象，变成指向全局对象
• 表示一个函数被另一对象所拥有或包含，从形成的上下文关系，这时this会指向该对象

示例代码:

// 定义一个全局变量
var v = 100;
// this经常被定义在函数的作用域中
function fn() {
    // this总是要返回一个对象
    console.error(this.v);// this指向哪个对象,不取决于函数定义的位置
}
// this指向哪个对象,取决于调用的位置
// fn();// 函数的调用


// 定义一个对象,将fn函数作为obj对象的方法
var obj = {
    v : 200,
    f : fn
};
// obj.f();
console.error(this.v);

代码分析图:

---

显示绑定

• 用于处理隐式绑定丢失的一种方法
• 在调用函数时就明确this所指向的对象

示例代码:

// 定义一个全局变量
var v = 100;
// 定义一个函数
function fn() {
    console.log(this.v);
}
// 定义一个对象
var obj = {
    v : 200,
    f : fn// 对象的f()方法指向fn()函数
};
// 定义一个全局变量,并被赋值为对象obj的f()方法
var fun = obj.f;
// 将fun作为一个函数进行调用
fun.apply(obj);

---

new绑定

• 通过构造函数所创建的对象，会成为该构造函数中的this所指向的对象

示例代码:

function Hero(name) {
this.name = name;
}
// this取决于函数调用的位置
var hero1 = new Hero('花木兰');

var hero2 = new Hero('秦始皇');

console.log(hero1.name);// 调用结果为 花木兰

---

被忽略的this

• 在使用apply()方法或call()方法来调用函数时，将null或undefined做为this绑定的对象传入时，会被忽略，并将this的绑定方式变成默认绑定

示例代码:

/* 定义函数 */
function fn() {
    console.log(this.v);
}
/* 定义全局变量 */
var v = 100;

fn.call(null);// 调用结果为 undefined （在浏览器环境中会显示 100 全局变量）

---

间接引用

• 表示将this从隐式绑定或显示绑定（有明确的指向对象）变成默认绑定（指向全局对象）

示例代码:

/* 定义一个函数 */
function foo() {
    console.log(this.a);
}
/* 定义一个全局变量 */
var a = 2;
/* 定义一个对象 */
var o = {
    a : 3,
    foo : foo
};
o.foo();// 调用结果为 3
var p = {a : 4};

// p.foo = o.foo;
// p.foo();// 4

(p.foo = o.foo)();// 调用结果为 undefined（浏览器环境中会显示 2 全局变量）