JavaScript 使用new关键字的时候做了什么？

JavaScript中，使用`new`关键字主要做了以下几件事情，来创建一个对象的实例：

1. 创建一个空对象：

首先，`new`关键字会创建一个空的JavaScript对象（`{}`）。

2. 设置原型：

接着，这个新创建的对象的`__proto__`属性会被赋值为构造函数的`prototype`属性。这意味着新对象会继承构造函数原型上的方法和属性。

3. 绑定`this`值：

构造函数内部的`this`被绑定到新创建的对象上。这意味着在构造函数内部，你可以使用`this`来引用新创建的对象，以便添加属性或方法。

4. 执行构造函数中的代码：

`new`关键字会执行构造函数中的代码，根据需要初始化对象。

5. 返回新对象：

默认情况下，构造函数会自动返回这个新创建的对象。但是，如果构造函数显式返回一个对象，则会返回该对象；如果返回非对象（如基本类型），则忽略该返回值，而是返回新创建的对象。

这个过程可以用下面的代码示例来说明：

function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.');
};
}
// 使用new关键字创建Person的一个实例
var person1 = new Person('Alice', 30);
// 使用刚创建的对象
person1.greet(); // 输出: Hello, my name is Alice and I am 30 years old.

在这个例子中，`new Person('Alice', 30)`做了以下几步：

- 创建了一个空对象``

- 将这个空对象的`__proto__`指向了`Person.prototype`，使它能够访问到`Person.prototype`上定义的任何属性或方法

- 将`this`绑定到新创建的空对象上，这样构造函数内部就可以使用`this`来引用这个对象

- 执行`Person`构造函数内部的代码，给新对象添加了`name`、`age`属性和`greet`方法

- 返回这个新创建的对象，赋值给`person1`变量

读本文约需要10分钟，您可以先关注我们，避免下次无法找到。

本篇文章成哥继续带大家来学习前端教程之JavaScript，网页的动态事件基本上都是靠它来实现的。下面我们就一起来学习内容吧！

01 JavaScript简介

JavaScript通常缩写为 JS，是一种高级的，解释执行的编程语言。

JavaScript 是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持 I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。

它已经由 ECMA（欧洲计算机制造商协会）通过 ECMAScript 实现语言的标准化。

它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、Firefox、Safari、Opera）支持。

JavaScript具有如下特点:

1）JavaScript是一种动态语言，用于在客户端设计网页。

2）它是区分大小写的语言。

3）它是非类型语言，即变量可以保存任何类型的值，Python语言也有相同的特点。

02 JavaScript文件

JavaScript的语句可以写在HTML文件中，也可以单独写在.js文件中，其具体如下所示

1）HTML文件

JavaScript写在HTML文件中时必须写在HTML文件中的'script'标签中，下面我们在HTML文件中通过JavaScript输出"Hello World"，具体示列如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>JavaScript基础教程</title>  
6. </head>  
7. <body>  
8.    <script>  
9.      document.write("Hello World from JavaScript!<br>");  
10.    </script>  
11. </body>  
12. </html>

2）js文件

现在我们创建一个单独的js文件，然后在HTML文件中应用具体示列如下：

1. // js文件  
2. document.write("Hello World from JavaScript!<br>");  
3.   
4. // html文件  
5. <!DOCTYPE html>  
6. <html>  
7. <head>  
8.   <meta charset="UTF-8">  
9.   <title>JavaScript基础教程</title>  
10. </head>  
11. <body>  
12.   <!-- 引入js文件  -->  
13.   <script src="test.js"></script>  
14. </body>  
15. </html>

03 JavaScript的关键字、数据类型、变量与常用操作

（1）JavaScript关键字

JavaScript包含了许多关键字，我们在编写语句时要注意避开这些关键字，以免引起不必要的错误。其常用关键字如下表所示：

（2）JavaScript数据类型

JavaScript包含了三种数据类型具体如下：

1）数值类型，如'123，12.1'在JavaScript中所有的数值类型其实都是浮点数

2）字符串类型，如'JavaScript基础教程'

3）布尔类型，如'true, false'

（3）JavaScript变量

JavaScript的变量一般用var这个关键字来定义，在ES6中变量一般用let定义。JavaScript是非类型化语言，即变量可以包含任何数据类型。JavaScript具体变量使用示列如下：

1. // 1.js文件  
2.  // document会在文章渲染后再执行，所以看到其在js文件中是在前面，但HTML页面输出的内容在最后  
3. document.write("Hello World from JavaScript!<br>");  
4.   
5.  // 定义变量your_name与age  
6. var your_name = "成哥";  
7. var age = 30;  
8.   // 在HTML中找到p_name的id标签，然后在内部插入html内容  
9. document.getElementById("p_name").innerHTML= "Hello "+ your_name + "<br>Age : " + age;  
10.   
11. // 2. HTML文件  
12. <!DOCTYPE html>  
13. <html>  
14. <head>  
15.   <meta charset="UTF-8">  
16.   <title>JavaScript基础教程</title>  
17. </head>  
18. <body>  
19.   <p id='p_name'></p>  
20.   <script src="test.js"></script>  
21. </body>  
22. </html>

我们还可以通过prompt方法获取用户在页面的输入的变量具体示列如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>JavaScript基础教程</title>  
6. </head>  
7. <body>  
8.   <script>  
9.     // prompt方法用于获取用户在页面输入的内容  
10.     var x = prompt("请输入一个数字，计算其10倍的结果");  
11.     document.write("其10倍结果为：10 * ", x, " = ", 10*x + "<br>");  
12.   </script>  
13. </body>  
14. </html>

（4）JavaScript运算符

1）算术运算符

2）赋值运算符

3）比较运算符

4）条件运算符

JavaScript的条件运算符为问号加冒号组合（？：），其规则是问号前面条件是否为true如果为true则执行冒号前面的表达式，如果为false则执行冒号后面的表达式，具体如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>JavaScript基础教程</title>  
6. </head>  
7. <body>  
8.   <script>  
9.     // prompt方法用于获取用户在页面输入的内容  
10.     var x = prompt("请输入一个数判断其是奇数还是偶数");  
11.     // 通过条件运算符来进行判断奇偶数  
12.     var result = x % 2 === 0 ? '偶数': '奇数';  
13.     document.write("数值(", x, ")为", result);  
14.   </script>  
15. </body>  
16. </html>

5）逻辑运算符

（5）类型转换

1）字符串传数值类型

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>JavaScript基础教程</title>  
6. </head>  
7. <body>  
8.   <script>  
9.     // 字符串转数值型通过Number方法实现  
10.     document.write("2 + Number('3.4') = ", 2 + Number('3.4'), "<br>");  
11.   </script>  
12. </body>  
13. </html>

2）整型转换

浮点的数值类型与字符串的数值类型可以通过parseInt方法转成整形具体示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>JavaScript基础教程</title>  
6. </head>  
7. <body>  
8.   <script>  
9.     // 整型转换  
10.     document.write("2 + parseInt('3.4') = ", 2 + parseInt('3.4'), "<br>"); // 字符串转整型  
11.     document.write("2 + parseInt(3.4) = ", 2 + parseInt(3.4), "<br>"); // 浮点数转整型  
12.   </script>  
13. </body>  
14. </html>

3）浮点数转换

数值型字符串与数值类型可以通过parseFloat方法转成浮点数，具体示列如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>JavaScript基础教程</title>  
6. </head>  
7. <body>  
8.   <script>  
9.     // 浮点数转换  
10.     document.write("2 + parseFloat('3.4') = ", 2 + parseFloat("3.4"), "<br>");   
11.   </script>  
12. </body>  
13. </html>

（6）字符串方法

JavaScript内置了好多针对字符串操作的方法，下面我们就演示一些常用的字符串方法具体示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>JavaScript基础教程</title>  
6. </head>  
7. <body>  
8.   <script>  
9.     // 字符串示例  
10.     document.write("hello".toUpperCase(), "<br>") // 转换为大写字母  
11.     w = "JavaScript"  
12.     document.write(w.toLowerCase(), "<br>") // 转换为小写  
13.     document.write(w.small(), "<br>") // 变小字体  
14.     document.write(w.bold(), "<br>") // 变粗字体  
15.     document.write(w.strike(), "<br>") // 给文字加上横线  
16.     document.write(w.fontsize("5em"), "<br>") // 设置字号大小  
17.     document.write(w.link("http://www.baidu.com"), "<br>") // 给其增加url链接  
18.     document.write(w.fontcolor("red").fontsize("12em"), "<br>") // 连续使用多个方法设置  
19.   </script>  
20. </body>  
21. </html>

（7）数组

JavaScript的数组类型可以包含不同的数据类型，比如一个数组同时包含字符串与数值类型，其跟Python非常类似，具体使用示例如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>JavaScript基础教程</title>  
6. </head>  
7. <body>  
8.   <script>  
9.     // 数组示例  
10.     arr = [15, 30, "Meher"]  
11.   
12.     // 遍历数组方式一：  
13.     document.write("遍历数组方式一：", "<br>");  
14.     for(a in arr)  
15.       document.write(arr[a], " ");  
16.     document.write("<br>");  
17.   
18.     // 遍历数组方式二：  
19.     document.write("遍历数组方式二：", "<br>");  
20.     for (var i=0;i<arr.length;i++){  
21.       document.write(arr[i], " ");  
22.     }  
23.     document.write("<br>");  
24.   
25.     document.write(arr.pop(), "<br>"); // 移除数组最后一个元素  
26.     arr.push("JavaScript"); // 在数组最后增加一个元素  
27.     document.write(arr.pop(), "<br>");  
28.     document.write("该数组长度为: ", arr.length, "<br>");  
29.   </script>  
30. </body>  
31. </html>

04 总结

至此我们《JavaScript基础教程上篇》就讲完了，下篇内容主要讲解JavaScript的控制语句、函数编程及异常处理等相关知识，敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！

-END-

@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。

文章推荐：

程序员都必掌握的前端教程之HTML基础教程（上）

、结构

一、标记<Html> 建立HTML文档

<Head> 设置网页头部和其它信息

<Body> 设计文件格式及内文所在<Body> 元素的属性

Text 设置页面文字的送顔色 Bgcolor 设置页面背景的顡色

Background 设置页面的背景图像 Link设置页面黙认的顔色

Bgproperties 设置页面的背景图像为固定，不随页面的滚动而滚动

Alink 设置鼠标正在单击时候的链接顔色 Vlink 设置访问过后的链接顔色

Topmargin 设置页面的上边距 Leftmargin 设置页面的左边距

二、头部

标记 <Base> 当前文档的URL全称 <Title>设置显示在浏览器在上方的标题内容

<Isindex> 表明该文档是一个可用于检索的网关脚本

<Meta> 有关文档本身的信息，例如用于查询的关键词，用于获取该文档的有效期等

<Style> 设置CSS层叠样式表的内容

<Mate> 标记属性

Http-Equiv 生成一个HTTP标题域，它的取值与另一个属性相同，

例如Http-Equiv=Expires，实际取值由Content确定

Name 如果元数据是以关键字/取值的形式出现的，Name 表示键字,

如Author或ID

Content 关键字/取值的内容

三、文字

文字标记 <HNumber>……<1HNumber> Number=1.2.3.4.5.6

分别指1至6级标题

<Font>文字

文字的修饰标记 <B>/<strong> 粗体 <I>/<Em>/<cite> 斜体

<Sup>上标 <sub>下标 <Big>大字号 <small>小字号

<U>下划线 <S>/<strike>删除线 <Address>地址

<Tt>打字机文字 <Blink>闪烁文字（只适用于Netscape浏览器）

<Code>/<samp>等宽 <kbd>键盘输入文字 <Var>声明变量

<Fant>标记的属性

Face 字体 Size字号 Color顔色

四.列表

列表标记 <Ul>无序列表 <Ol>有序列表 <Dir>回录列表 <Dl>定义列表

<Meru>菜单列表 <Dt>·<Dd>定义列表的标记 <Li>列表项目的标记

<Ul><Ol>标记的属性 Type设置列表类型 start设置列表起始属性

Type的属性值 1 数字 a 小写字母 A 大写字母 i小写罗马数字

I 大写罗马数字 Disc ● Circle ○ square □

五.链接

链接标记 <A> 链接

<A>标记的属性 Href 指定链接地址 Name给链接命名

Title设置链接提示文字 Target指定链接的目标窗口

Target属性值 -parent在上一级窗口中打开。一般使用分帧的框架页会经常使用

-bank在新窗口中打开

-self在同一个帧或窗口中打开.这项一般不用设置

Href属性值 http:// 进入万维网站点 news://启动新闻讨论

ftp:// 进入文件传输服务器 mailto:// 启动新闻讨论组

telnet:// 启动telnet方式 gopher://访问一个gopher服务器

六.图片

图片标记 <Img>图片 <Map>图像映射 <Area>图像映射中定义区域

<lmg>标记的属性 src图像的源文件 Alt提示文字 Width宽度

Height高度 Vspace垂直间距 Hspace水平间距 Align排列 Border边框

Align属性值 Top文字的中间线居于图片上方 Middle文字的中间线居于图片中间

Bottom文字的中间线居于图片底部 Left 图片在文字的左侧

Right图片在文字的右侧 Absbottom文字的底线居于图片底部

Absmiddle文字的底线居于图片中间 Baseline英文文字基线对齐

Texttop英文文字上边线对齐

Shape属性值

Rect矩形区域 Circle椭圆形区域 Poly多边形区域

七.表格

1.表格标记 <Table>…</Table>表格标记 <Tr>…</Tr>行标记

<Td>…</Td>单元格标记 <Th>表头标记

<Table>标记属性 Bordercolor 表格边框色 Borde表格边框的宽度

Bordercolorlight 表格边框亮边框色（左上边框顔色）

Bordercolordark 表格暗边框色（右下边框顔色）

Bordercolor 行的边框顔色 Width表格的宽度 Height表格的高度

Bgcolor表格的背景顔色 Background表格的背图像

<Tr>标记属性 Align行内容的水平对齐 Valign 行内容的垂直对齐

Bgcolor 行的背景顔色 Background 行的背景图像

Bordercolor 行的边框顔色 Bordercolorlight 行的亮边框顔色

Bordercolordark 行的暗边框顔色

<Td>标记属性 Align单元内容的水平对齐 Valign单元格内容的垂直对齐

Bgcolor 单元格的背景顔色 Background 单元格的背景图像

Bordercolor单元格的背景顔色 Bordercorlorlight单元格的亮边框顔色

Brodercolordark 单元格的暗边框顔色 Width 单元格的宽度

Height单元格的高度

<Th>标记属性 Align表头内容的水平对齐 Valign表头内容的垂直对齐

Bgcolor 表头的背景顔色 Background表头的背景图像

Bordercolor表头的边框顔色 Bordercolorlight 表头的亮边框顔色

Bordercolordark 表头的暗边框顔色 Width 表头的宽度 Height 表头的高度

八.表单

1.表单标记 <Form>表单标记 <Input>表单输入标记

<select>菜单和列表标记 <Option>菜单和列表项目标记

2.属性 <Form> Name表单的名称

Method 定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get,post

Action 用来定义表单处理程序（一个Asp,CGI等程序）的位置（相对地址或绝对地址）

<lnput>标记属性 Name 域的名称 Type域的类型

Maxlength 域的最大输入字符数 size域的宽度 Value 域的默认值

<Select>标记属性 Name 菜单和列表的名称 size 显示的选项数目

Multiple 列表中的项目多选 Value 选项值 selected默认选项

<Texrarea>标记属性 Name 文字域的名称 Rows文字域的行数

Cols 文字域的列数 Value 文字域的默认值

Type属性值 Text 文字域 Password 密码域 File 文件域

Checkbox复选框 Redio单选框 Button普通按扭

Submit 提交按钮 Reset重置按钮 Hidden隐藏域Image图像域

九.滚动

滚动标记 <Marquee>

<Marquee>标记属性 Direction 滚动方向 up 文字向上滚动 Left文字向左滚动

Behavior 滚动方式 Scroll 循环往复

Side 只做一次滚动

Alternate 交替进行滚动

ScrollAmount 滚动速度

ScrollDelay 滚动延迟

Trim函数用来剔除首尾空格

十.框架

1.标记 <Frameset> 框架边框标记 <Frame> 框架标记 <Iframe>浮动框架标记

<Frameset>标记属性 Cols列 Rows行

<Frame> 标记属性 src框架中显示页面源文件的路径

FrameBorder 框架边框显标属性 FrameSpacing框架边框宽度属性

Scrolling框架滚动条显示属性 NoResize 框架尺寸调整属性

BorderColor 框架边框顔色属性 MarginWidt 框架边框缘宽度属性

MarginHerght框架边缘高度属性

<1frame> 标记属性 src浮动框架中显示页面源文件的路径

Width 浮动框架的宽度 Height 浮动框架的高度

Name 浮动框架的名称

Align 浮动框架的排列方式 Left表示居左 Center表示居中 Right表示居右

FrameBorder 框架边框显示属性 FrameSpacing 框架宽度属性

Scrolling 框架滚动条显示属性 ( yes显示 No不显示 Auto根据页面的长度自动判断是否晶粒示滚动条

NoResize 框架尺寸调整属性 BorderColor框架的顔色

MarginWidth 框架边缘宽度属性 MarginHeight 框架边缘高度属性

插入刷新

步骤：1.选择"查看/文件头内容"

2.在插入面板上，打开HTML选项卡

优化代码

打开文件窗口，执行"命令、清理HTML"命令

文本换行：Enter 行距较大

Enter + Shift 行距较小

插入水平线设置顔色：单击属性面板中的快捷标签编辑器按钮

在代码中键入"color = #顔色值"

当图像无法显示时将显示这段文字：

图像属性中的替代→输入文字

插入鼠标经过图像:准备两张图像

在文件窗口中，将光标放置于需要翻转图像位置→插入工具栏中单击鼠标经过图像

Ⅱ.使用导航条：

在"常用"对象组中，单击"图像"小三角→导航条

插入图像占位符：图像小三角→图像占位符

Flash动画的背景实现透明参数wmode 值 transparent

插入 Java Applet

插入表单

插入表单域：对象面板上"表单"→插入表单

插入文本域：单击面板上的插入文本域. 初始值 = 打开时显于的文字

插入密码框：在属性面板上选择密码

插入多行文本域：在类型后选择多行

插入隐藏域：对象面板→插入隐藏域

插入按钮：标签用来设置按钮上显示的文本

插入图像提交按钮=图像域：

插入文件上传按钮=文件域：

插入单选框

插入单选按钮组：Label文字说明 Value 单选按钮的值

插入复选框

菜单/插入列表：列表值→

插入跳转菜单：(

制作网页链接

URL统一资源定位器

目标：_blank在一个新的未命名的浏览器窗口中打开

_parent如果是嵌套的框架，链接会在父框架或窗口中打开，否则=_top

_top在完整的浏览器中打开

创建搜索页

运行中输入:

Inetmgr (IIS

Odbcad32 (odbc

Asp对象

Applicatipn 在给定的应用程序的所有用户间共享信息,并在服务器运行期间持久地保存数据。

集合： Contents

staticObjects

Item（变量值）=设置资料变量的值

Key（变量名称）=设置资料变量的名称

Count（变量资料的数量）=表示

Coutents集合中资料的总数量

方法： Lock

Unlock

事件： Applicatipn_Onstart

Application_OnEnd

Session 存储特定的用户会话所需的信息

属性：CodePage

LCID

SessionID

Timeout

集合：Contents

StaticObjects

方法：Abandon

事件：Session_Onstart

Session_OnEnd

Response 用来控制发送给用户的信息，包括直接发送信息给浏览器，重定位浏览器到另一个URL或设置Cookie值

属性： Buffer

CacheControl

Charset

ContentType

Expires

ExpiresAbsolute

IsClientConnected

PICS

Status

集合： Cookies

方法： AddHeader

AppendToLog

BinaryWrite

Clear

End

Flush

Redirect

Write

Request 访问任何基于HTTP请求传递的信息，常见的有从HTML表单用Post方法或Get方法传递的参数，Cookie或用户认证等。

属性： TotalBytes

集合： ClientCertificate

Form

QueryString

ServerVaiables

方法： BinaryRead

Server 提供对服务器方法和属性的访问

属性： ScriptTimeout

集合：无

方法： CreatObject

HTMLEncode

MapPath

URLEncode

Recordset

MoveNext 将前数据记录移至下一条

MovePrevious 将当前数据记录移至上一条

MoveFirst 将当前数据记录移至第一条

MoveLast 将当前数据记录移至最后一条

AbsolutePosition=N 将当前数据记录移至第N条

EOF 当前数据记录是否移过了最后一条（发生于向下移动时）

BOF 当前数据记录是否移过了第一条（发生于向上移动时）

VBScript 运算符

算术运算符

指数取负乘法除法加法减法取模连接整数除法

∧ － * ／ ﹢ ﹣ Mod & \

比较运算符

相等不相等小于大于小于或等于大于或等于对象相象

= <> < > <= >= IS

逻辑运算符

逻辑非逻辑与逻辑或异或逻辑等于逻辑蕴含

Not And Or Xor Eqv Imp

在线咨询

上一篇：剖析一个html5实例-风车
下一篇：Rust跨界前端全攻略

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商