JavaScript函数new和this关键词理解(十三)

news/2024/7/19 13:49:55 标签: javascript, js, 前端

new关键词的使用:

一般用来做 new 一个函数,产生一个新的函数,用来构造一个构造函数模板,用new方式创建具体调用对象。

比如jquery中的 jQuery 就是new出来的,还有文本编辑器等,在页面引入js资源后,也会用new 来创建具体调用者。

用new一个函数以后,每个调用者在函数内部都会有一个自己的调用对象,在调用执行时,可通过this关键词来代指调用者的对象。

this关键词:

当前调用者的对象, 比如如果一个在全局作用域下 使用 this 就相当于window对象。

在函数内部使用this 就相当于函数内部的 调用者对象。但是如果在一个函数内使用  this对象。普普通调用函数时,函数内部变量值会共用,会造成数据污染。如果想每个调用者都保留自己的调用对象,则可用new函数的方式 来new一个对象。这样内部变量将互不影响。

示例,各自new一个对象,产生三个对象 ans、bns、MyFunction

// 函数定义,内部有个name函数(参数也相当于一个函数内部的局部变量)
var MyFunction = function(name){
  var _this = this;
  _this.name = name;
  console.log(_this.name+'好吃的油炸代码');
}
// new一个函数,调用者 this的对象name值是 张三说,独立对象
var ans = new MyFunction('张三说:');
// new一个函数,调用者 this的对象name值是 李四说, 独立对象
var bns = new MyFunction('李四说:');

结果展示:

情况1:对ans的name值变更观测 bns 对象的name值

// 对 ans 的内部变量name改变者,观测 bns 的name值是否变化,结果不变
ans.name = '张三的儿子说:'

结果展示:

情况2:对bns的name值变更观测ans对象的name值


// 对 bns 的内部变量name改变者,观测 ans的name值是否变化,结果不变
ans.name = '李四的的儿子说:';

结果展示:  


http://www.niftyadmin.cn/n/1867585.html

相关文章

JavaScript 小数相加

浮点型计算会有精度丢失问题,解决思路V1版: 1、把浮点型 转换为 int整形计算 在除以 倍数 比如: 0.10.02(0.1*1000.02*100)/100 2、倍数 怎么取 小数点后的位数长度就是 倍数,可把 浮点参数 当成字符串,然后利用sp…

html是什么的理解

文章中我说两部分,1部分官方解释 2部分说说自己理解。 官方标准解释: HTML的全称为HyperText Markup Language,也就是超文本标记语 言。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说 明文字、图形、动画、声音、表格、超…

Emeditor 删除一行某个字符之前所有内容

示例:一行中前有 数字.XXX 需求:删除掉XXX前的内容 操作:使用Emeditor的查询替换 正则表达式,查找^.\. 替换为空 参考内容: Emeditor 常用的正则表达式 - dzqabc - 博客园Emeditor 目前来说是我个人感觉非常不错的一…

win10家庭版设置本地策略组

win10家庭版没有本次策略组,在远程桌面时、会报某些错误,需要在本次策略组配置些东西。 本地策略组添加步骤: 1、新建个文件夹,cmd进入新建文件夹 dos命令 回车 目的在文件夹中,新建一个 gpedit.cmd 的文件 2、文件…

我的学习清单

一、css学习 布局学习(2-3套课程学习) less sass 二、vue系列学习 axios vue router vuex webpack node学习 npm 命令 三、Java学习 springboot springmvc 课外学习: 沙雕动画 摄影技术 素描学习画画 自考: 英语…

1.mac M1 Java 开发环境的安装与配置

1.首先我们打开谷歌浏览器复制下面的网址安装jdk: Java Download | Java 7, Java 8, Java 11, Java 13, Java 15, Java 17, Java 19 - Linux, Windows and macOShttps://www.azul.com/downloads/?packagejdk#zulu 2.我们翻到最下面去选择我们需要的版本&#xff…

MYSQL使用binlog日志恢复数据

本教程目的在于,你的MYSQL采用了binlog日志,且产生了binlog日志文件,使用日志文件恢复数据。 步骤一、找到要恢复数据的binlog文件 怎么找?使用命令:show variables like %log_bin%; 如下图:这个路径就是…

Vue 知识点:列表排序

Vue 知识点&#xff1a;列表排序 <div id"root"><h2>人员列表</h2><input type"text" placeholder"请输入名字" v-model"keyword"/><button click"sortType 2">年龄升序</button><…