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

nevermind 发布于2019-08-23 11:25 / 1915人阅读

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

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 全局变量）

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96938.html

JavaScript中的面向对象个人分享

摘要：面向对象面向对象的概念所谓面向对象就用抽象方式创建基于显示世界模型的一种变成模式面向对象编程可以看做是使用一系列对象互相协作的软件设计备注面向对象全称简称面向对象编程的主要三个特征是封装所谓封装就是按要求使用得到对象的结果相关数据用于存储面向对象面向对象的概念所谓面向对象就用抽象方式创建基于显示世界模型的一种变成模式,面向对象编程可以看做是使用一系列对象互相协作的软件设计备注...

DirtyMind 2019-08-26 12:11 评论0 收藏0
JavaScript面向对象中的原型个人分享

摘要：原型原型是什么所谓原型就是类型对象的一个属性在函数定义时就包含了属性它的初始值是以个空对象在中并没有定义函数的原型类型所以原型可以是任何类型原型是用于保存对象的共享属性和方法的原型的属性和方法并不会影响函数本身的属性和方法示例代码类型的属性原型原型是什么所谓原型(Prototype)就是Function类型对象的一个属性在函数定义时就包含了prototype属性,它的初始值是...

pakolagij 2019-08-26 12:14 评论0 收藏0
JavaScript面向对象中的继承个人分享

摘要：继承原型链所谓言行链就是如果构造函数或对象的原型指向构造函数或对象的原型再指向构造函数或对象以此类推最终的构造函数或对象的原乡指向的原型由此形成一条链状结构被称之为原型链示例代码原型链通过构造函数创建对象将的原型指向对象通过构造函数创建对象继承原型链所谓言行链就是如果构造函数或对象A,A的原型指向构造函数或对象B,B的原型再指向构造函数或对象C,以此类推,最终的构造函数或对象的原...

Coly 2019-08-26 12:14 评论0 收藏0
前端开发周报: CSS 布局方式与JavaScript数据结构和算法

摘要：如果没有学习过计算机科学的程序员，当我们在处理一些问题时，比较熟悉的数据结构就是数组，数组无疑是一个很好的选择。 showImg(https://segmentfault.com/img/bVTSjt?w=400&h=300); 1、常见 CSS 布局方式详见：一些常见的 CSS 布局方式梳理，涉及 Flex 布局、Grid 布局、圣杯布局、双飞翼布局等。http://cherryb...

huhud 2019-08-20 18:59 评论0 收藏0