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

目录
相关文章
|
7月前
|
监控 负载均衡 JavaScript
有哪些有效的方法可以优化Node.js应用的性能?
有哪些有效的方法可以优化Node.js应用的性能?
384 69
|
7月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
6月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
561 0
|
6月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
681 80
|
6月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
285 19
|
8月前
|
前端开发 JavaScript Java
【Java进阶】JavaScript电灯开关实例:从理论到实践
这个例子展示了JavaScript的基本功能,包括操作HTML元素,监听事件,以及改变元素的样式。通过学习和理解这个例子,你可以了解到JavaScript在网页中的应用,以及如何使用JavaScript来创建交互式的网页。
181 13
|
7月前
|
人工智能 监控 前端开发
基于 Next.js 的书法字体生成工具架构设计与 SSR 优化实践
本项目是一款书法字体生成工具,采用 Next.js 14(App Router)与 Tailwind CSS 构建前端,阿里云 Serverless 部署后端。通过混合渲染策略(SSG/SSR/CSR)、Web Worker 异步计算及 CDN 字体分片加载优化性能。服务端借助阿里云函数计算处理计算密集型任务,将平均耗时从 1200ms 降至 280ms,支持 1000+ QPS。动态路由与 ARMS 监控提升工程化水平,未来计划引入 WebGPU 和 AI 字体风格迁移技术,进一步优化用户体验。
|
8月前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
JS回收机制方法讲解
|
9月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
9月前
|
监控 JavaScript 前端开发
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例