《JS原理、方法与实践》- 点运算符与this关键字

简介: 《JS原理、方法与实践》- 点运算符与this关键字

#### 点运算符

点运算符可用来操作对象的属性。这里的操作可以分为获取和赋值两种类型。在赋值的情况下,如果对象原来没有所操作的属性则会添加,如果有则会修改其值。

代码示例:

```

var person = { name: 'zzh' };

person.age = 18;

console.log(person.name); // zzh

person.name = 'David';

console.log(person.name); // David

```

![测试结果](https://upload-images.jianshu.io/upload_images/2789632-455eaf5ad705fb77.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#### this的含义

###### 书上说的三种子类型也不清楚是什么,暂且不做理解,只记一句话:

“谁直接调用方法,this就指向谁”。也就是说方法的点前面的对象就是this。

代码示例:

```

var color = 'red';

function Obj () {

var color = 'balck';

}

Obj.color = 'green';

Obj.prototype.logColor = function () {

console.log(this.color);

}

var o = new Obj();

o.color = 'blue';

o.logColor(); // blue

```

例子中一个有4个color, 一个是全局变量,一个是Obj的局部变量,一个是Obj的属性,还有一个是Obj创建的实例对象o的属性。logColor方法是Obj的prototype中的方法属性,其中打印了this.color的值。在调用o.logColor()时,这里使用使用对象o中的color属性,也就是blue,这是因为logColor方法是被o对象直接调用的。

#### 关联方法后的this

代码示例:

```

function logColor() {

console.log(this.color);

}

function Obj () {}

var o = new Obj();

Obj.color = 'red';

o.color = 'blud';

Obj.logColor = logColor;

o.logColor = logColor;

Obj.logColor(); // red

o.logColor(); // blue

```

谁调用方法this就指向谁!!!

#### 内部函数中的this

代码示例:

```

var v = 1;

function Program () {

var v = 2;

this.v = 3;

}

Program.prototype.logV = function () {

function innerLog () {

 console.log(this.v);

}

innerLog();

}

var pro = new Program();

pro.logV();  // 1

```

若希望打印出Program的this.v 即3, 有三种处理方法:

方法一:

```

Program.prototype.logV = function () {

var instance = this;

function innerLog () {

 console.log(instance.v);

}

innerLog();

}

```

方法二:

```

Program.prototype.logV = function () {

function innerLog () {

 console.log(this.v);

}

this.innerLog = innerLog;

this.innerLog();

}

```

方法三:

```

Program.prototype.logV = function () {

function innerLog (v) {

 console.log(v);

}

innerLog(this.v);

}

```

#### 对象的属性不可以继承

属性不可以继承指的是,如果对象有多个层次,那么父子对象里的属性不可以相互继承和调用。

代码示例:

```

function logV() {

console.log(this.v);

}

var obj = {v: 1};

obj.sonObj = {};

obj.logV = logV;

obj.sonObj.logV = logV;

obj.logV(); // 1

obj.sonObj.logV(); // undefined

```

之所以为undefined, 也是this的一种应用,此时obj.sonObj并没有定义属性v且没有继承ovj的v,所以打印其结果为undefined.  

目录
相关文章
|
13天前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
23小时前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
6天前
|
JavaScript 前端开发 Go
异步加载 JS 的方法
【10月更文挑战第24天】异步加载 JavaScript 是提高网页性能和用户体验的重要手段。通过使用不同的方法和技术,可以实现灵活、高效的异步加载 JavaScript。在实际应用中,需要根据具体情况选择合适的方法,并注意处理可能出现的问题,以确保网页能够正常加载和执行。
|
17天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
18天前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
38 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
23小时前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
23小时前
|
JavaScript 前端开发 开发者
|
18天前
|
存储 JavaScript 前端开发
JavaScript数组去重的八种方法详解及性能对比
在JavaScript开发中,数组去重是一个常见的操作。本文详细介绍了八种实现数组去重的方法,从基础的双重循环和 indexOf() 方法,到较为高级的 Set 和 Map 实现。同时,分析了每种方法的原理和适用场景,并指出了使用 Set 和 Map 是目前最优的解决方案。通过本文,读者可以深入理解每种方法的优缺点,并选择最合适的数组去重方式。
32 0
|
19天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
93 0
|
19天前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
24 0