《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.  

目录
相关文章
|
2天前
|
JavaScript 前端开发
在JavaScript中实现模块化开发有多种方法
JavaScript模块化开发可通过CommonJS、AMD和ES6模块实现。CommonJS适用于服务器端,使用`require`和`module.exports`处理模块;AMD(如RequireJS)用于浏览器端,依赖`require`和`define`;ES6模块提供原生支持,使用`import`和`export`。选择方式需考虑项目环境、复杂度和技术栈。
10 4
|
2天前
|
JavaScript 前端开发
深入了解前端框架Vue.js的响应式原理
本文将深入探讨Vue.js前端框架的核心特性之一——响应式原理。通过分析Vue.js中的数据绑定、依赖追踪和虚拟DOM等机制,读者将对Vue.js的响应式系统有更深入的理解,从而能够更好地利用Vue.js构建灵活、高效的前端应用。
|
2天前
|
JavaScript 前端开发
JS tostring()和join()方法
JS tostring()和join()方法
7 1
|
2天前
|
存储 JavaScript 前端开发
深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
7 0
|
3天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下,直接调用函数时`this`指全局对象,严格模式下为`undefined`。作为对象方法调用时,`this`指向该对象。用`new`调用构造函数时,`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中,`this`可能不直观,箭头函数和绑定方法可帮助管理`this`的行为。
9 1
|
3天前
|
JavaScript 前端开发
JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
6 1
|
3天前
|
JavaScript 前端开发 索引
js添加、删除、替换、插入元素的方法
js添加、删除、替换、插入元素的方法
10 0
|
4天前
|
JavaScript 前端开发
JavaScript 循环方法详解
JavaScript 循环方法详解
18 1
|
4天前
|
JavaScript 前端开发
JavaScript数字方法详解
JavaScript数字方法详解
17 0
|
4天前
|
存储 JavaScript 前端开发
JavaScript对象方法详解
JavaScript对象方法详解
14 1