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

Cristalven 发布于2019-08-23 11:25 / 1091人阅读

摘要：关键字描述一般被定义在函数中使用都会指向一个对象通过调用函数的位置来判断当前指定的对象默认绑定表示在函数中使用，在调用该函数时，没有具体的指向目标，会默认为指向全局对象示例代码定义一个全局变量定义一个函数在函数调用时无法找到具体的对象，会指

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

GPU云服务器云服务器 javascript 面向对象 javascript面向对象 javascript面向对象编程 javascript面向对象编程指南

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

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

【JavaScript】面向对象之错误与异常与this关键字

摘要：一错误与异常概述错误，指程序中的非正常运行状态，在其它语言中称为异常或错误将每个错误中创建个对象，描述包含的错误信息通过使用提供异常的处理语句，可以用结构化方式捕捉发生错误，异常处理代码与核心代码实现分离语句语句是指中处理异常一种标准方式， JS(JavaScript)一.错误与异常1.概述错误，指程序中的非正常运行状态，在其它语言中称为异常或错误将每个错误中创建个Error对象，描述...

ASCH 2019-08-23 11:25 评论0 收藏0
面向对象的 JavaScript

摘要：是完全的面向对象语言，它们通过类的形式组织函数和变量，使之不能脱离对象存在。而在基于原型的面向对象方式中，对象则是依靠构造器利用原型构造出来的。 JavaScript 函数式脚本语言特性以及其看似随意的编写风格，导致长期以来人们对这一门语言的误解，即认为 JavaScript 不是一门面向对象的语言，或者只是部分具备一些面向对象的特征。本文将回归面向对象本意，从对语言感悟的角度阐述为什...

novo 2019-08-21 10:49 评论0 收藏0
温故知新之javascript面向对象

摘要：应该非常小心，避免出现不使用命令直接调用构造函数的情况。上面代码表示，使用属性，确定实例对象的构造函数是，而不是。当然，从继承链来看，只有一个父类，但是由于在的实例上，同时执行和的构造函数，所以它同时继承了这两个类的方法。基本概念类和实例是大多数面向对象编程语言的基本概念类：类是对象的类型模板实例：实例是根据类创建的对象但是，JavaScript语言的对象体系，不是基于类的，...

赵连江 2019-08-22 12:45 评论0 收藏0
JS面向对象二:this/原型链/new原理

摘要：情况没有明确作用对象的情况下，通常为全局对象例如函数的回调函数，它的就是全局对象。正因如此，机器可以作为这类对象的标志，即面向对象语言中类的概念。所以机器又被称为构造函数。原型链也就是继承链。 JS面向对象二:this/原型链/new原理阮一峰JavaScript教程:面向对象编程阮一峰JavaScript教程:实例对象与 new 命令阮一峰JavaScript教程:this 关...

anRui 2019-08-26 12:17 评论0 收藏0
javascript之面向对象总结

摘要：之面向对象总结前言在中是没有类的概念的，所以它的对象与基于类的语言中的对象不同。一理解对象张三上面通过构造函数创建了一个对象，并为它添加了三个属性。 JavaScript之面向对象总结前言：在ECMAScript中是没有类的概念的，所以它的对象与基于类的语言中的对象不同。ECMA-262把对象总结为：无序属性的集合，其属性包含基本值、对象或者函数。一、理解对象 var person...

taowen 2019-08-22 15:56 评论0 收藏0