JavaScript 之 面向对象 [ this关键字 ]

this关键字

描述

• this 一般被定义在函数中使用
• this 都会指向一个对象
• this 通过调用函数的位置来判断当前指定的对象

默认绑定

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

示例代码

/* 定义一个全局变量 */
var unm = 100;
/* 定义一个函数 */
function fun() {
    console.log( this.unm );
}
/* 在函数调用时this无法找到具体的对象，会指向全局对象 */
fun();// 显示 undefined（在浏览器环境中会显示匹配的全局变量数值）

隐式绑定

• 表示一个函数被另一对象所拥有或包含，从形成的上下文关系，这时this会指向该对象

示例代码

/* 定义一个函数 */
function fun() {
    console.log( this.name );
}

/* 定义一个对象 */
var obj = {
    name : '唐三',
    /* 该对象的方法为一个指定函数 - 形成上下文关系 */
    fn : fun
}
/* 调用指定方法 */
obj.fn();// 显示 唐三

隐式绑定的丢失

• 将一个指定对象中的指定方法赋值给一个全局变量，在调用全局变量时，this将从原本指向具体对象，变成指向全局对象

示例代码

/* 定义一个函数 */
function fun() {
    console.log( this.name );
}

/* 定义一个对象 */
var obj = {
    name : '唐三',
    /* 该对象的方法为一个指定函数 - 形成上下文关系 */
    fn : fun
}
/* 调用指定方法 */
obj.fn();// 显示 唐三
/* 将指定对象的方法赋值给一个变量 */
var s = obj.fn;
/* 调用变量 */
s();// 显示 undefined

显示绑定

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

示例代码

/* 定义一个函数 */
function fun() {
    console.log( this.name );
}

/* 定义一个对象 */
var obj = {
    name : '唐三',
    /* 该对象的方法为一个指定函数 - 形成上下文关系 */
    fn : fun
}
/* 调用指定方法 */
obj.fn();// 显示 唐三
/* 将指定对象的方法赋值给一个变量 */
var s = obj.fn;
/* 调用变量并明确指定this所指定的对象 */
s.apply( obj );// 显示 唐三

new绑定

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

示例代码

/* 定义一个构造函数 */
function Fun() {
    /* this会指向该构造函数所创建的对象 */
    this.name = '唐三';
}

/* 创建对象 */
var obj = new Fun();
console.log( obj.name );// 显示 唐三

被忽略的this

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

示例代码

/* 定义函数 */
function fun(){
    console.log( this.s );
}
/* 定义全局变量 */
var s = 100;
/* 使用call()方法来调用指定函数 */
fun.call( null );// 显示 undefined （在浏览器环境中会显示 100 全局变量）

间接引用

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

示例代码

/* 定义一个函数 */
function fun() {
    console.log( this.s );
}
/* 定义一个全局变量 */
var s = 10;
/* 定义一个对象 */
var obj = {
    s : 20,
    fn : fun
};
/* 调用方法 */
obj.fn();// 显示 20

/* 定义另一个对象 */
var x = {
    s : 30
};
/* 将obj对象中的方法新增到新对象中并调用 */
( x.fu = obj.fn )();// 显示 undefined（浏览器环境中会显示 10 全局变量）