JavaScript知识点总结
<p> </p><h3>一.简介</h3>
<p>JavaScript（缩写：JS）是一门高级的、解释型的动态编程语言。用于 HTML或web应用，可被浏览器直接执行。</p>
<p>完整的JavaScript包括以下几个部分：</p>
<ul>
<li>ECMAScript，描述了该语言的语法和基本对象</li>
<li>文档对象模型（DOM），描述处理<strong>网页内容</strong>的方法和接口</li>
<li>浏览器对象模型（BOM），描述与<strong>浏览器</strong>进行交互的方法和接口</li>
</ul>
<p>JavaScript的基本特点如下：</p>
<ul>
<li>是一种解释性脚本语言（代码不进行预编译）。</li>
<li>主要用来向HTML页面添加<strong>交互行为</strong>。</li>
<li>可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。</li>
</ul>
<p>JavaScript常用来完成以下任务：</p>
<ul>
<li>嵌入动态文本于HTML页面</li>
<li>对浏览器事件作出响应</li>
<li>读写HTML元素</li>
<li>在数据被提交到服务器之前验证数据</li>
<li>检测访客的浏览器信息</li>
<li>控制cookies，包括创建和修改等</li>
</ul>
<p> </p>
<h3>二.用法</h3>
<p><strong>1.嵌入HTML</strong></p>
<p class="intro">HTML 中的脚本必须位于 <script> 与 </script> 标签之间。</p>
<p class="intro">脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><!</span><span style="color: rgba(255, 0, 255, 1)">DOCTYPE html</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">
document.write(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">hello world</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">
.
</span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">
document.write(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">hello world</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">
.
</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p>如果 <script> 放在 body 中，建议放在底部。因为浏览器会按照代码在文件中的顺序解析 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。所以，要将 JavaScript 代码放在 body 中，应置于 HTML 页面底部。</p>
<p> </p>
<p><strong>2.外部js脚本</strong></p>
<p>也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。</p>
<p>外部 JavaScript 文件的文件扩展名是 .js。外部文件不使用 <span class="marked"><script> 标签，直接写 javascript 代码。</span></p>
<p>如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><!</span><span style="color: rgba(255, 0, 255, 1)">DOCTYPE html</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">script </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="xx.js"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p> </p>
<p><strong>3.在console调试</strong></p>
<p>可以进入浏览器中console，如chrome F12 进入console，以命令行的形式输入js命令</p>
<p><img src="https://img2018.cnblogs.com/blog/1685507/201906/1685507-20190611140909809-111514835.png" alt=""></p>
<p> </p>
<p><strong>4.事件触发</strong></p>
<p>把 JavaScript 代码放入函数中，在事件发生时调用该函数。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">button </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="button"</span><span style="color: rgba(255, 0, 0, 1)"> onclick</span><span style="color: rgba(0, 0, 255, 1)">="myFunction()"</span><span style="color: rgba(0, 0, 255, 1)">></span>按钮<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">function</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> myFunction()
{
alert(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">hello</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">);
}
</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p> </p>
<h3>三.变量</h3>
<p>JavaScript 使用关键字 <strong>var</strong> 来定义变量， 使用等号来为变量赋值</p>
<p>也可以使用<strong>let</strong>,<strong>const</strong>来定义，这三者的区别是：var与let涉及块级作用域，let 命令只在所在的代码块 <strong>{}</strong> 内有效，具体参考<span style="text-decoration: underline">这里</span>；const定义一个只读常量</p>
<p>一般用var即可，let更推荐</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">声明</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> a = 10;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">初始化</span>
a = 20 ; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">赋值</span></pre>
</div>
<p>注意: 在JavaScript中，所有代码指令都会以分号结尾 (<code>;</code>) </p>
<p>JavaScript中<strong>数据类型</strong>主要有:</p>
<table class="standard-table">
<thead>
<tr><th scope="row">
<p><span style="font-family: "Microsoft YaHei"">变量</span></p>
</th><th scope="col">
<p><span style="font-family: "Microsoft YaHei"">解释</span></p>
</th><th scope="col">
<p><span style="font-family: "Microsoft YaHei"">示例</span></p>
</th></tr>
</thead>
<tbody>
<tr><th scope="row">
<p><span style="font-family: "Microsoft YaHei"">String</span></p>
</th>
<td>
<p>字符串（一串文本）。字符串的值必须将用引号（单双均可，必须成对）扩起来。</p>
</td>
<td>
<p>var name = "John";</p>
<p>字符访问:name name</p>
</td>
</tr>
<tr><th scope="row">
<p><span style="font-family: "Microsoft YaHei"">Number</span></p>
</th>
<td>
<p>数字。JavaScript 只有一种数字类型。数字可以带小数点，也可以不带</p>
</td>
<td>
<p>let x1=34.00; <br>let x2=34; </p>
</td>
</tr>
<tr><th scope="row">
<p><span style="font-family: "Microsoft YaHei"">Boolean</span></p>
</th>
<td>
<p>布尔值（真 / 假）。 <code>true</code>/<code>false</code> 是 JS 里的特殊关键字，无需引号。</p>
</td>
<td>
<p>let x=true;<br>let y=false;</p>
</td>
</tr>
<tr><th scope="row">
<p><span style="font-family: "Microsoft YaHei"">Array</span></p>
</th>
<td>
<p>数组，用于在单一引用中存储多个值的结构。</p>
</td>
<td>
<p>let cars=["Saab","Volvo","BMW"];</p>
<p>元素引用方法：cars,cars<code><br></code></p>
</td>
</tr>
<tr><th scope="row">
<p><span style="font-family: "Microsoft YaHei"">Object</span></p>
</th>
<td>
<p>对象，JavaScript 里一切皆对象，一切皆可储存在变量里。</p>
<p>对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔</p>
</td>
<td>
<p>let person={firstname:"John", lastname:"Doe", id:5566};</p>
<p>let newObject = document.querySelector('h1');</p>
<p>对象属性访问:object.AttributesName object[''AttributesName'']</p>
</td>
</tr>
</tbody>
</table>
<p>算数运算符主要有:</p>
<table border="0" align="center">
<tbody>
<tr>
<td><span style="font-size: 15px">+ 加法 </span></td>
<td><span style="font-size: 15px">- 减法</span></td>
<td><span style="font-size: 15px">* 乘法</span></td>
<td><span style="font-size: 15px">/ 除法</span></td>
</tr>
<tr>
<td><span style="font-size: 15px">% 取模</span></td>
<td><span style="font-size: 15px">++自增 </span></td>
<td><span style="font-size: 15px">--自减</span></td>
<td> </td>
</tr>
</tbody>
</table>
<p>比较运算符主要有:</p>
<table border="0" align="center">
<tbody>
<tr>
<td><span style="font-size: 15px">==等于</span></td>
<td><span style="font-size: 15px">=== 绝对等于（值和类型均相等）</span></td>
<td><span style="font-size: 15px">!= 不等于</span></td>
<td><span style="font-size: 15px">!== 不绝对等于（值和类型有一个不相等，或两个都不相等）</span></td>
</tr>
<tr>
<td><span style="font-size: 15px">> 大于</span></td>
<td><span style="font-size: 15px">< 小于</span></td>
<td><span style="font-size: 15px">>= 大于或等于</span></td>
<td><span style="font-size: 15px"><= 小于或等于</span></td>
</tr>
</tbody>
</table>
<p>在常规的比较中，数据类型是被忽略的</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> x = 10<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> y = "10"<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (x == y) <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">返回true，所以要用===</span></pre>
</div>
<p> </p>
<h3>四.基本语法</h3>
<p><strong>1.条件语句</strong></p>
<p>if 语句只有当指定条件为 true 时，该语句才会执行代码。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (condition)
{
当条件为 </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)"> 时执行的代码
}</span></pre>
</div>
<p>使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (condition)
{
当条件为 </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)"> 时执行的代码
}
</span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)">
{
当条件不为 </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)"> 时执行的代码
}</span></pre>
</div>
<p>使用 if....else if...else 语句来选择多个代码块之一来执行。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (condition1)
{
当条件 </span>1 为 <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)"> 时执行的代码
}
</span><span style="color: rgba(0, 0, 255, 1)">else</span> <span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (condition2)
{
当条件 </span>2 为 <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)"> 时执行的代码
}
</span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)">
{
当条件 </span>1 和 条件 2 都不为 <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)"> 时执行的代码
}</span></pre>
</div>
<p>三目运算</p>
<div class="cnblogs_code">
<pre>let variablename = (condition)?<span style="color: rgba(0, 0, 0, 1)">value1:value2
condition成立则variablename </span>= value1 否则value2</pre>
</div>
<p> </p>
<p><strong>2.循环语句</strong></p>
<p>JavaScript 支持不同类型的循环：</p>
<ul>
<li><strong>for</strong> - 循环代码块一定的次数</li>
<li><strong>for/in</strong> - 循环遍历对象的属性</li>
<li><strong>while</strong> - 当指定的条件为 true 时循环指定的代码块</li>
<li><strong>do/while</strong> - 同样当指定的条件为 true 时循环指定的代码块</li>
</ul>
<p>for 循环</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">for</span> (语句 1; 语句 2; 语句 3<span style="color: rgba(0, 0, 0, 1)">)
{
被执行的代码块
}
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">语句 1 （代码块）开始前执行</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">语句 2 定义运行循环（代码块）的条件</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">语句 3 在循环（代码块）已被执行之后执行</span></pre>
</div>
<p>for/in遍历</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">for</span> (x <span style="color: rgba(0, 0, 255, 1)">in</span> 可遍历对象)<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> x 为属性名</span>
<span style="color: rgba(0, 0, 0, 1)">{
执行代码块
}</span></pre>
</div>
<p>while 循环会在指定条件为真时循环执行代码块。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">while</span><span style="color: rgba(0, 0, 0, 1)"> (条件)
{
需要执行的代码
}</span></pre>
</div>
<p>do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">do</span><span style="color: rgba(0, 0, 0, 1)">
{
需要执行的代码
}
</span><span style="color: rgba(0, 0, 255, 1)">while</span> (条件);</pre>
</div>
<p> </p>
<p><strong>3.函数语法</strong></p>
<p>函数就是包裹在花括号中的代码块，前面使用了关键词 function：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> functionname()
{
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 执行代码</span>
}</pre>
</div>
<p>加上形参</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> myFunction(var1,var2)
{
代码
</span><span style="color: rgba(0, 0, 255, 1)">return</span> var3<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">使用 return 语句时，函数会停止执行，并返回指定的值</span>
}</pre>
</div>
<p>匿名函数，函数存储在变量中，不需要函数名称，通常通过变量名来调用。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> x = <span style="color: rgba(0, 0, 255, 1)">function</span> (a, b) {<span style="color: rgba(0, 0, 255, 1)">return</span> a *<span style="color: rgba(0, 0, 0, 1)"> b};
</span><span style="color: rgba(0, 0, 255, 1)">var</span> z = x(4, 3);</pre>
</div>
<p> </p>
<p><strong>4.异常判断</strong></p>
<p><strong>try</strong> 语句允许我们定义在执行时进行错误测试的代码块。</p>
<p><strong>catch</strong> 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。</p>
<p>JavaScript 语句 <strong>try</strong> 和 <strong>catch</strong> 是成对出现的。</p>
<p>finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">try</span><span style="color: rgba(0, 0, 0, 1)"> {
... </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">异常的抛出</span>
} <span style="color: rgba(0, 0, 255, 1)">catch</span><span style="color: rgba(0, 0, 0, 1)">(e) {
... </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">异常的捕获与处理</span>
} <span style="color: rgba(0, 0, 255, 1)">finally</span><span style="color: rgba(0, 0, 0, 1)"> {
... </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">结束处理</span>
}</pre>
</div>
<p> </p>
<h3>五.面向对象</h3>
<p>新建对象，js中对象就是实例对象，js中没有类，只有对象构造器（类似于类）</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">直接创建</span>
objectName = {name:value,name:<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">()}
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">new 创建</span>
objectName = <span style="color: rgba(0, 0, 255, 1)">new</span> Object() <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">Object()是创建一个{}对象</span>
<span style="color: rgba(0, 0, 0, 1)">
objectName </span>= <span style="color: rgba(0, 0, 255, 1)">new</span> constructor <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">constructor：构造器 有点像python中的类</span></pre>
</div>
<p>对象构造器</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> Person(firstname,lastname,age,eyecolor)
{
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.firstname=<span style="color: rgba(0, 0, 0, 1)">firstname;
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.lastname=<span style="color: rgba(0, 0, 0, 1)">lastname;
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.age=<span style="color: rgba(0, 0, 0, 1)">age;
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.eyecolor=<span style="color: rgba(0, 0, 0, 1)">eyecolor;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">添加方法</span>
<span style="color: rgba(0, 0, 255, 1)">this</span>.changeName=<span style="color: rgba(0, 0, 0, 1)">changeName;
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> changeName(name)
{
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.lastname=<span style="color: rgba(0, 0, 0, 1)">name;
}
}
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）类似python中self</span></pre>
</div>
<p>根据构造器实例对象</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> person1=<span style="color: rgba(0, 0, 255, 1)">new</span> Person("John","Doe",50,"blue"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> person2=<span style="color: rgba(0, 0, 255, 1)">new</span> Person("Sally","Rally",48,"green"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">一定要用new</span><span style="color: rgba(0, 128, 0, 1)">
//</span><span style="color: rgba(0, 128, 0, 1)">没有初始化数值的属性会指定undefined</span></pre>
</div>
<p>访问对象属性与方法</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">person1.lastName;
person1[</span>"lastName"<span style="color: rgba(0, 0, 0, 1)">];
person1.changeName(</span>'dave')</pre>
</div>
<p>向对象添加属性</p>
<div class="cnblogs_code">
<pre>person1.firstname="John"<span style="color: rgba(0, 0, 0, 1)">;
person1.lastname</span>="Doe"<span style="color: rgba(0, 0, 0, 1)">;
person1.nationality </span>= "English"; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">可以给对象添加新的属性</span>
<span style="color: rgba(0, 0, 0, 1)">
Person.nationality </span>= "English"; <span style="color: rgba(0, 128, 0, 1)">//如果</span><span style="color: rgba(0, 128, 0, 1)">给构造器直接添加新的属性,这里就是给Person这个对象加属性，不会遗传给Person的实例对象的</span></pre>
</div>
<p> </p>
<p><strong>原型对象</strong></p>
<p>1.原型对象实际是构造实例对象的构造器中的一个属性，只不过这个属性是个对象</p>
<p>2.这个原型对象中的属性与方法，都会被对象实例所共享（类似python中的类方法，类属性）</p>
<p>3.但，原型对象的属性不是对象实例的属性，只要修改原型对象上的属性和方法，变动就会立刻体现在所有对象实例上。</p>
<p>4.JavaScript对每个创建的对象都会设置一个属性__proto__ ，指向它的原型对象xxx.prototype。</p>
<p>如上面person1和person2的原型对象就是Person.prototype</p>
<div class="cnblogs_code">
<pre>person1.changeName ===<span style="color: rgba(0, 0, 0, 1)"> person2.changeName
...</span><span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">
person1.changeName </span>===<span style="color: rgba(0, 0, 0, 1)"> Person.changeName
...</span><span style="color: rgba(0, 0, 255, 1)">false</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">因为this绑定实例，所以方法都是各自实例独立的方法。所以说this跟python中self类似</span></pre>
</div>
<p>如果想要一种所有实例共享的方法或属性，那只有给Person.prototype中添加修改方法或属性，person1和person2都会得到更新，且person1.__proto__ 等同于Person.prototype</p>
<div class="cnblogs_code">
<pre>Person.prototype.changeName2= <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (name)
{
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.lastname=<span style="color: rgba(0, 0, 0, 1)">name;
}
person1.changeName2 </span>===<span style="color: rgba(0, 0, 0, 1)"> person2.changeName2;
...</span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
person1.__proto__ </span>===<span style="color: rgba(0, 0, 0, 1)"> person2.__proto__;
...</span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
person1.__proto__ </span>===<span style="color: rgba(0, 0, 0, 1)"> Person.prototype;
...</span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
person1.__proto__
...{changeName2: ƒ, constructor: ƒ}</span></pre>
</div>
<p> </p>
<p><strong>原型链</strong></p>
<p>1.由于xxx.prototype也是个某个构造器的实例对象，所以它也有__proto__指向一个原型对象yyy.prototype,所以会成链</p>
<p>2.原型链的顶端或源头，是Object.prototype（有点像基因链呀，继承也是通过这条链实现的）</p>
<p>3.读取实例对象的某个属性或方法时，JavaScript引擎按照 对象-->原型对象a-->a的原型对象b----,最后到Object.prototype如果还是找不到，就返回undefined</p>
<p>4.如果实例对象属性和原型对象属性名一样，同python，优先实例自身的属性</p>
<p> </p>
<p><strong>class语法</strong></p>
<p>ES6提供了更接近传统语言的写法，引入了Class语法，但是实际上还是原型的本质，只是写法更简单？了</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">class Person{
constructor(firstname,lastname,age,eyecolor){
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.firstname=<span style="color: rgba(0, 0, 0, 1)">firstname;
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.lastname=<span style="color: rgba(0, 0, 0, 1)">lastname;
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.age=<span style="color: rgba(0, 0, 0, 1)">age;
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.eyecolor=<span style="color: rgba(0, 0, 0, 1)">eyecolor;
}
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">添加原型方法</span>
<span style="color: rgba(0, 0, 0, 1)"> changeName(name)
{
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.lastname=<span style="color: rgba(0, 0, 0, 1)">name;
}
}</span></pre>
</div>
<p> </p>
<p><strong>对象继承</strong></p>
<p>原型的继承</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> Teacher(firstname,lastname,age,eyecolor,subject)
{
Person.call(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">,firstname,lastname,age,eyecolor);
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.subject =<span style="color: rgba(0, 0, 0, 1)"> subject;
}
Teacher.prototype </span>= Object.create(Person.prototype);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">把Teahcer原型对象链接到Person原型对象下</span>
<span style="color: rgba(0, 0, 0, 1)">
Teacher.prototype.constructor </span>= Teacher; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">将constructor构造器指回Teacher</span></pre>
</div>
<p>class继承</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">class Teacher extends Person{
constructor(firstname,lastname,age,eyecolor,subject) {
super(firstname,lastname,age,eyecolor);
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.subject =<span style="color: rgba(0, 0, 0, 1)"> subject;
}
teach(){
console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.subject);
}
}</span></pre>
</div>
<p> </p>
<h3>六.DOM对象</h3>
<p>在浏览器中，页面被加载的时候，会自动生成这个页面的DOM对象（document）</p>
<p>DOM对象是一个树模型</p>
<p>可以通过这个对象：</p>
<ul>
<li>JavaScript 能够改变页面中的所有 HTML 元素</li>
<li>JavaScript 能够改变页面中的所有 HTML 属性</li>
<li>JavaScript 能够改变页面中的所有 CSS 样式</li>
<li>JavaScript 能够对页面中的所有事件做出反应</li>
</ul>
<p><strong>1.查找HTML元素</strong></p>
<p>通过id查找</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> x=document.getElementById("intro"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">如果未找到该元素，则 x 将包含 null。</span></pre>
</div>
<p>通过标签查找</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> y=document.getElementsByTagName("div"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">如果有多个同类标签，则返回多个对象的数组</span></pre>
</div>
<p>通过类名查找</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> x=document.getElementsByClassName("intro");</pre>
</div>
<p>因为查找返回的元素也是对象，所以可以对它再进行查找</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> x=document.getElementById("main"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> y=x.getElementsByTagName("p"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素</span></pre>
</div>
<p> </p>
<p><strong>2.修改HTML元素</strong></p>
<p>改变HTML输出流</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">document.write();
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">如果在文档(DOM)加载完成之后使用则会覆盖该文档</span></pre>
</div>
<p>修改 HTML 内容</p>
<div class="cnblogs_code">
<pre>document.getElementById(id).innerHTML=新的 HTML内容</pre>
</div>
<p>改变 HTML 元素的属性</p>
<div class="cnblogs_code">
<pre>document.getElementById(id).attribute=新属性值</pre>
</div>
<p> </p>
<p><strong>3.DOM事件</strong></p>
<p>事件可以是浏览器行为，也可以是用户行为，当事件触发时，可以执行对应的js代码</p>
<p>常见事件</p>
<table class="reference" style="height: 173px; width: 480px">
<tbody>
<tr><th>事件</th><th>描述</th></tr>
<tr>
<td>onchange</td>
<td>HTML 元素改变</td>
</tr>
<tr>
<td>onclick</td>
<td>用户点击 HTML 元素</td>
</tr>
<tr>
<td>onmouseover</td>
<td>用户在一个HTML元素上移动鼠标</td>
</tr>
<tr>
<td>onmouseout</td>
<td>用户从一个HTML元素上移开鼠标</td>
</tr>
<tr>
<td>onkeydown</td>
<td>用户按下键盘按键</td>
</tr>
<tr>
<td>onload</td>
<td>浏览器已完成页面的加载</td>
</tr>
</tbody>
</table>
<p>HTML 元素中可以添加事件属性，并添加 JavaScript 代码，当此元素的事件被触发时，就会触发执行js代码</p>
<div class="cnblogs_code">
<p><button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button><br><p id="demo"></p></p>
</div>
<p>也可以由DOM对象分配事件，因为事件也是html的一个属性</p>
<div class="cnblogs_code">
<pre><script><span style="color: rgba(0, 0, 0, 1)">
document.getElementById(</span>"myBtn").onclick=<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){displayDate()};
</span></script></pre>
</div>
<p>addEventListener() 方法</p>
<div class="cnblogs_code">
<pre>element.addEventListener("click", <span style="color: rgba(0, 0, 255, 1)">function</span>(){ alert("Hello World!"); });</pre>
</div>
<p>语法为</p>
<div class="cnblogs_code">
<pre>element.addEventListener(event, <span style="color: rgba(0, 0, 255, 1)">function</span>, useCapture);</pre>
</div>
<p>第一个参数是事件的类型 (如 "click" 或 "mousedown").</p>
<p>第二个参数是事件触发后调用的函数。</p>
<p>第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。</p>
<p>详细的事件类型参考https://developer.mozilla.org/zh-CN/docs/Web/Events,注意与在元素属性中的事件是不同的</p>
<p> </p>
<p><strong>4.HTML元素操作</strong></p>
<p>插入元素节点到父节点下appendChild()</p>
<div class="cnblogs_code">
<pre><div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>
<span style="color: rgba(0, 0, 255, 1)">var</span> para = document.createElement("p"); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">创建一个空元素</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> node = document.getElementById('list'<span style="color: rgba(0, 0, 0, 1)">),
para.appendChild(node);
结果：
</span><div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
<p></p>
</div></pre>
</div>
<p>插入元素在某个元素之前</p>
<p>使用parentElement.insertBefore(newElement, referenceElement)</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span><span style="color: rgba(0, 0, 0, 1)">
list </span>= document.getElementById('list'<span style="color: rgba(0, 0, 0, 1)">),
ref </span>= document.getElementById('python'<span style="color: rgba(0, 0, 0, 1)">),
haskell </span>= document.createElement('p'<span style="color: rgba(0, 0, 0, 1)">);
haskell.id </span>= 'haskell'<span style="color: rgba(0, 0, 0, 1)">;
haskell.innerText </span>= 'Haskell'<span style="color: rgba(0, 0, 0, 1)">;
list.insertBefore(haskell, ref);
结果：
</span><div id="list">
<p id="java">Java</p>
<p id="haskell">Haskell</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div></pre>
</div>
<p> </p>
<p> </p>
<p> </p>
<p>摘自https://www.runoob.com/js/js-tutorial.html与https://developer.mozilla.org，主要是学习js过程中的整理（不全），加了一些自己的理解。</p>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
<div style="font-size: 12px">作者：fengf233</div>
<div style="font-size: 12px">出处：https://www.cnblogs.com/fengf233/</div>
<div style="font-size: 12px">本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 </div><br><br>
来源：https://www.cnblogs.com/fengf233/p/10944084.html
頁:
[1]