JavaScript高级

倩児發表於 2019-9-3 21:56:00

<div>
<div class="cnblogs_code"> </div>
<p> </p>
<h2><strong>1.面向过程与面向对象</strong></h2>
</div>
<div>
<div>　1.1面向过程</div>
<div>　　面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。</div>
<div>　　面向过程是实现代码逻辑的步骤，主要是把重心点放在实现功能上，不太去考虑封装</div>
<div>　　优点：效率高，但是维护起来太麻烦　　</div>
<div>　 1.2面向对象</div>
<div>　　面向对象是把事务分解成一个个对象，然后由对象之间分工合作。</div>
<div>　　主要的重心点，先放在功能模块的划分，然后想着什么功能模块可以去进行复用（可以进行抽取）</div>
<div>　　优点：会让我们功能具备模块化开发，一个模块就负责一个功能，后续方便我们的维护</div>
<div>　　<span style="background-color: rgba(255, 102, 0, 1)">三大特性：继承性、封装性、多态性（抽象性）</span></div>
<div> </div>
<h2><span style="background-color: rgba(255, 102, 0, 1)"><strong><span style="background-color: rgba(255, 255, 255, 1)">2.对象与类</span></strong><br></span></h2>
<div><span style="background-color: rgba(255, 102, 0, 1)"><strong><span style="background-color: rgba(255, 255, 255, 1)">　 </span></strong><span style="background-color: rgba(255, 255, 255, 1)">2.1 对象</span></span><span style="background-color: rgba(255, 102, 0, 1)"><span style="background-color: rgba(255, 102, 0, 1)"><span style="background-color: rgba(255, 255, 255, 1)">　</span></span></span></div>
<div>
<div>　　对象是由属性和方法组成的：是一个无序键值对的集合,指的是一个具体的事物</div>
<div>　　属性：事物的特征，在对象中用属性来表示（常用名词）</div>
<div>　　方法：事物的行为，在对象中用方法来表示（常用动词）</div>

</div>
<div>　　创建对象的两种方法</div>
<div>　　　　1.字面量创建对象　　　　</div>
<div>
<div>　　　　　　var ldh = {</div>
<div>　　　　　　name: '刘德华',</div>
<div>　　　　　　age: 18</div>
<div>　　　　　　}</div>
<div>　　　　　　console.log(ldh);</div>

</div>
<div> </div>
<div> </div>
<div>　　　　2.构造函数创建对象</div>
<div>　　　　　　function Star(uname,age){<br>　　　　　　　　this.uname = name;</div>
<div>　　　　　　　　this.age = age;</div>
<div>　　　　　　}</div>
<div>　　　　　　var ldh = new Star('刘德华'，18)； //实例化对象</div>
<div>　　　　　　console.log(ldh);</div>
<div>　2.2 类　</div>
<div>
<div>　　在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实</div>
<div>　　例化对象。类抽象了对象的公共部分，它泛指某一大类（class）对象特指某一个，</div>
<div>　　通过类实例化一个具体的对象</div>
<div>　　 </div>
<div>　　2.2.1创建类</div>
<div>　　   语法：　　</div>
<div>
<div>　　　    //步骤1 使用class关键字</div>
<div>　　　　class name {</div>
<div>　　　　// class body</div>
<div>　　　　}</div>
<div>　　　　//步骤2使用定义的类创建实例注意new关键字</div>
<div>　　　　var xx = new name();</div>
<div>　　2.2.2类创建添加属性和方法　　</div>
<div>
<div>　　　　// 1. 创建类 class 创建一个类</div>
<div>　　　　class Star {</div>
<div>　　　　　　// 类的共有属性放到 constructor 里面 constructor是构造器或者构造函数</div>
<div>　　　　　　constructor(uname, age) {</div>
<div>　　　　　　this.uname = uname;</div>
<div>　　　　　　this.age = age;</div>
<div>　　　　　　}//‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐>注意,方法与方法之间不需要添加逗号</div>
<div>　　　　　　sing(song) {</div>
<div>　　　　　　console.log(this.uname + '唱' + song);</div>
<div>　　　　　　}</div>
<div>　　　　}</div>
<div>　　// 2. 利用类创建对象 new 实例化</div>
<div>　　var ldh = new Star('刘德华', 18);</div>
<div>　　console.log(ldh);   // Star {uname: "刘德华", age: 18}</div>
<div>　　ldh.sing('冰雨');     // 刘德华唱冰雨</div>

</div>
<div> </div>

</div>
<div>
<div>　　<span style="background-color: rgba(255, 102, 0, 1)">注意点：</span></div>
<div><span style="background-color: rgba(255, 102, 0, 1)">　　　　1. 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写</span></div>
<div><span style="background-color: rgba(255, 102, 0, 1)">　　　　2. 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象</span></div>
<div><span style="background-color: rgba(255, 102, 0, 1)">　　　　3. constructor 函数只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数</span></div>
<div><span style="background-color: rgba(255, 102, 0, 1)">　　　　4. 多个函数方法之间不需要添加逗号分隔</span></div>
<div><span style="background-color: rgba(255, 102, 0, 1)">　　　　5. 生成实例 new 不能省略</span></div>
<div><span style="background-color: rgba(255, 102, 0, 1)">　　　　6. 语法规范, 创建类类名后面不要加小括号,生成实例类名后面加小括号, 构造函数不需要加function</span></div>
<div> </div>
<div><span style="background-color: rgba(255, 255, 255, 1)">　2.2.3 类的继承</span></div>
<div><span style="background-color: rgba(255, 255, 255, 1)">　　语法：   class Father { }; // 父类</span></div>
<div><span style="background-color: rgba(255, 255, 255, 1)">　　　　　　class Son extends Father { } // 子类继承父类 extends</span></div>
<div><span style="background-color: rgba(255, 255, 255, 1)"><span style="background-color: rgba(255, 255, 255, 1)">　　示例：   </span></span>
<div>　　　　　　class Father {</div>
<div>　　　　　　　　constructor(surname) {</div>
<div>　　　　　　　　this.surname= surname;</div>
<div>　　　　　　　　}</div>
<div>　　　　　　　　say() {</div>
<div>　　　　　　　　　　console.log('你的姓是' + this.surname);</div>
<div>　　　　　　　　}</div>
<div>　　　　　　}</div>
<div>　　　　　　class Son extends Father{     // 这样子类就继承了父类的属性和方法</div>
<div>　　　　　　}</div>
<div>　　　　　　var damao= new Son('刘');</div>
<div>　　　　　　damao.say(); // 输出结果是   你的姓是刘</div>
<div>　　
<div>　　子类使用super关键字访问父类的方法</div>
<div>　　　
<div>　　　　//定义了父类</div>
<div>　　　　class Father {</div>
<div>　　　　　　constructor(x, y) {</div>
<div>　　　　　　this.x = x;</div>
<div>　　　　　　this.y = y;</div>
<div>　　　　　　}</div>
<div>　　　　　　sum() {</div>
<div>　　　　　　　　console.log(this.x + this.y);</div>
<div>　　　　　　}</div>
<div>　　　　}</div>
<div>　　　　//子元素继承父类</div>
<div>　　　　class Son extends Father {</div>
<div>　　　　　　constructor(x, y) {</div>
<div>　　　　　　　　super(x, y); //使用super调用了父类中的构造函数</div>
<div>　　　　　　}</div>
<div>　　　　}</div>
<div>　　　　var son = new Son(1, 2);</div>
<div>　　　　son.sum();     //结果为3</div>
<div> </div>
<div>
<div>　　注意:</div>
<div>　　　　1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的</div>
<div>　　　　2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)</div>
<div>　　　　<span style="background-color: rgba(255, 153, 0, 1)">3. 如果子类想要继承父类的方法,同时在自己内部扩展自己的方法,利用super 调用父类的构造函数,super 必须在子类this之前调用</span></div>
<div> </div>
<div><span style="background-color: rgba(255, 255, 255, 1)">　2.2.4 时刻注意this的指向问题</span></div>
<div><span style="background-color: rgba(255, 255, 255, 1)">　　　　我们在类中，去使用属性或者是调用方法千万不要忘记了用 this，</span></div>
<div><span style="background-color: rgba(255, 255, 255, 1)">　　　　需要去关注的就是this的指向问题： </span></div>
<div><span style="background-color: rgba(255, 255, 255, 1)">　　　　    默认情况下，类中的this都指向的是当前实例化的对象，</span></div>
<div><span style="background-color: rgba(255, 255, 255, 1)"><span style="background-color: rgba(255, 255, 255, 1)">　　　　    除非 </span></span>绑定事件之后this指向的就是触发事件的事件源</div>

</div>

</div>

</div>

</div>
<div>　</div>
<h2>3.构造函数和原型</h2>
<p>　　3.1 静态成员和实例成员</p>
<p>　　　　实例成员：实例成员就是构造函数内部通过this添加的成员，实例成员只能通过实例化的对象来访问</p>
<p> 　　　　以下代码里的 uname  age sing就是实例成员</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> Star(uname, age) {
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.uname =<span style="color: rgba(0, 0, 0, 1)"> uname;
</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>.sing = <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">() {
         console.log(</span>'我会唱歌'<span style="color: rgba(0, 0, 0, 1)">);
   }
}
</span><span style="color: rgba(0, 0, 255, 1)">var</span> ldh = <span style="color: rgba(0, 0, 255, 1)">new</span> Star('刘德华', 18<span style="color: rgba(0, 0, 0, 1)">);
console.log(ldh.uname); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">实例成员只能通过实例化的对象来访问 </span></pre>
</div>
<p> </p>
<p> 　　　　静态成员：在构造函数本身上添加的成员静态成员只能通过构造函数来访问    在ES5中只要被static修饰的属性和方法都是静态成员</p>
<p> 　　　　下列代码中 sex 就是静态成员</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)"> Star(uname, age) {
      </span><span style="color: rgba(0, 0, 255, 1)">this</span>.uname =<span style="color: rgba(0, 0, 0, 1)"> uname;
      </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>.sing = <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">() {
            console.log(</span>'我会唱歌'<span style="color: rgba(0, 0, 0, 1)">);
      }
}
Star.sex </span>= '男'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> ldh = <span style="color: rgba(0, 0, 255, 1)">new</span> Star('刘德华', 18<span style="color: rgba(0, 0, 0, 1)">);
console.log(Star.sex);       </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">静态成员只能通过构造函数来访问</span></pre>
</div>
<p>　　3.2构造函数的问题</p>
<p>　　　　存在浪费内存的问题</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)"> Star(uname , age) {
   </span><span style="color: rgba(0, 0, 255, 1)">this</span>.uname =<span style="color: rgba(0, 0, 0, 1)"> uname;
   </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>.sing = <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
         console.log(</span>'我会唱歌'<span style="color: rgba(0, 0, 0, 1)">)
   }
}
</span><span style="color: rgba(0, 0, 255, 1)">var</span> ldh = <span style="color: rgba(0, 0, 255, 1)">new</span> Star("刘德华"，18<span style="color: rgba(0, 0, 0, 1)">)；
</span><span style="color: rgba(0, 0, 255, 1)">var</span> shuji= <span style="color: rgba(0, 0, 255, 1)">new</span> Star("书记"，22<span style="color: rgba(0, 0, 0, 1)">)；
ldh.sing();
shuji.sing();</span></pre>
</div>
<p>   以上代码在调用sing方法时都会在内存开辟一个新的空间，如果有多个对象来调用sing方法就会占用过多内存，所以我们就用到了构造函数的原型 prototype。</p>
<p>　　3.3 构造函数原型prototype</p>
<p>　　　　构造函数通过原型分配的函数是所有对象所共享的。</p>
<p> 　　　　JavaScript 规定，每一个构造函数都有一个prototype 属性，指向另一个对象。注意这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。</p>
<p> 　　　　我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。</p>
<p> 　　　　构造函数.prototype就可以获取原型对象</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> Star(uname, age) {
      </span><span style="color: rgba(0, 0, 255, 1)">this</span>.uname =<span style="color: rgba(0, 0, 0, 1)"> uname;
      </span><span style="color: rgba(0, 0, 255, 1)">this</span>.age =<span style="color: rgba(0, 0, 0, 1)"> age;
}
Star.prototype.sing </span>= <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">() {
      console.log(</span>'我会唱歌'<span style="color: rgba(0, 0, 0, 1)">);
}
</span><span style="color: rgba(0, 0, 255, 1)">var</span> ldh = <span style="color: rgba(0, 0, 255, 1)">new</span> Star('刘德华', 18<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> zxy = <span style="color: rgba(0, 0, 255, 1)">new</span> Star('张学友', 19<span style="color: rgba(0, 0, 0, 1)">);
ldh.sing();</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">我会唱歌 </span>
zxy.sing();<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">我会唱歌</span></pre>
</div>
<p> </p>
<p> 　　3.4 对象原型</p>
<p>　　　　实例化对象都会有一个__proto__属性指向构造函数的原型对象，而我们的实例化对象可以使用对象原型的属性和方法就是因为有__proto__属性的存在</p>
<p>　　　　<span style="background-color: rgba(255, 153, 0, 1)">实例化对象.__proto__ ===  构造函数.prototype</span></p>
<p><span style="background-color: rgba(255, 153, 0, 1)"><span style="background-color: rgba(255, 255, 255, 1)">　　　　它们的三角关系如下图：</span></span></p>
<p><span style="background-color: rgba(255, 153, 0, 1)"><span style="background-color: rgba(255, 255, 255, 1)">　　　　　　<img src="https://img2018.cnblogs.com/blog/1665391/201909/1665391-20190903203529233-463133656.png"></span></span></p>
<p><span style="background-color: rgba(255, 153, 0, 1)"><span style="background-color: rgba(255, 255, 255, 1)">　　　　</span></span>__proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它<span style="background-color: rgba(255, 153, 0, 1)">是一个非标准属性</span>，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象prototype</p>
<p> 　　3.5 constructor构造函数</p>
<p> <span style="background-color: rgba(255, 255, 255, 1)">　　　　</span>对象原型（ __proto__）和构造函数（prototype）原型对象里面都有一个属性constructor 属性</p>
<p>　　　　 constructor 我们称为构造函数，因为它指回构造函数本身。</p>
<p>　　　　 constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。</p>
<p>　　　　</p>
<div>　　　　如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数</div>
<div class="cnblogs_code">
<div>function Star(uname, age) {</div>
<div>　　this.uname = uname;</div>
<div>　　this.age = age;</div>
<div>}</div>
<div>// 很多情况下,我们需要手动的利用constructor 这个属性指回原来的构造函数</div>
<div>Star.prototype = {</div>
<div>// 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数</div>
<div>　　constructor: Star, // 手动设置指回原来的构造函数</div>
<div>　　sing: function() {</div>
<div>　　　　console.log('我会唱歌');</div>
<div>　　},</div>
<div>　　movie: function() {</div>
<div>　　　　console.log('我会演电影');</div>
<div>　　}</div>
<div>}</div>
<div>var zxy = new Star('张学友', 19);</div>
<div>console.log(zxy)</div>
</div>
<p> 　　3.6 原型链和查找机制</p>
<p>　　　　每一个实例对象又有一个proto属性，指向的构造函数的原型对象，构造函数的原型对象也是一个对象，也有proto属性，这样一层一层往上找就形成了原型链。</p>
<p>　　　　<img src="https://img2018.cnblogs.com/blog/1665391/201909/1665391-20190903204717778-849386857.png"></p>
<p>　　</p>
<p> 　　　　查找机制：</p>
<p>　　　　　　当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性，如果自身有，就有自身的属性和方法。</p>
<p>　　　　　　如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）。</p>
<p>　　　　　　如果还没有就查找原型对象的原型（Object的原型对象）。依此类推一直找到 Object 为止（null）。</p>
<p>　　　　　　如果找到尽头（null)都没找到，是属性则返回undefined，是方法则报错</p>
<p> 　　</p>
<p>　　3.7 原型对象中this的指向</p>
<p>　　　　构造函数中的this和原型对象的this,都指向我们new出来的实例对象</p>
<p> 　　3.8 通过原型对象为数组扩展内置方法</p>
<p>　　　　</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">var arr =
arr.prototype.sum = function() {
   var sum = 0;
   for (var i = 0; i < this.length; i++) {
               sum += this;
   }
   return sum;
};          //此时数组对象中已经存在sum()方法了可以用于数组.sum()进行数据的求和
</pre>
</div>
<p>　　</p>
<h2>4.继承</h2>
<p>　　4.1 call()</p>
<p>　　　　call()可以调用函数   可以修改this的指向，使用call()的时候，()里的第一个参数是修改的this指向，参数2 参数3 使用逗号隔开</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)"> fn(x, y) {
console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">);
console.log(x </span>+<span style="color: rgba(0, 0, 0, 1)"> y);
}
</span><span style="color: rgba(0, 0, 255, 1)">var</span> o =<span style="color: rgba(0, 0, 0, 1)"> {
name: </span>'andy'<span style="color: rgba(0, 0, 0, 1)">
};
fn.call(o, </span>1, 2); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">调用了函数此时的this指向了对象o, </span></pre>
</div>
<p>  　　4.2 构造函数继承属性　　</p>
<div>　　　　1. 先定义一个父构造函数</div>
<div>　　　　2. 再定义一个子构造函数</div>
<div>　　　　3. 子构造函数继承父构造函数的属性(使用call方法)</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 1. 父构造函数 </span>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> Father(uname, age) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> this 指向父构造函数的对象实例</span>
   <span style="color: rgba(0, 0, 255, 1)">this</span>.uname =<span style="color: rgba(0, 0, 0, 1)"> uname;
   </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, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 2 .子构造函数 </span>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> Son(uname, age, score) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> this 指向子构造函数的对象实例 </span><span style="color: rgba(0, 128, 0, 1)">
//</span><span style="color: rgba(0, 128, 0, 1)">3.使用call方式实现子继承父的属性 </span>
   Father.call(<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">, uname, age);
   </span><span style="color: rgba(0, 0, 255, 1)">this</span>.score =<span style="color: rgba(0, 0, 0, 1)"> score;
}
</span><span style="color: rgba(0, 0, 255, 1)">var</span> son = <span style="color: rgba(0, 0, 255, 1)">new</span> Son('刘德华', 18, 100<span style="color: rgba(0, 0, 0, 1)">);
console.log(son);</span></pre>
</div>
<p> 　　</p>
<p> 　　4.3 借用原型对象继承方法</p>
<div>　　　　(1). 先定义一个父构造函数</div>
<div>　　　　(2). 再定义一个子构造函数</div>
<div>　　　　(3). 子构造函数继承父构造函数的属性(使用call方法)</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 1. 父构造函数 </span>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> Father(uname, age) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> this 指向父构造函数的对象实例 </span>
　　<span style="color: rgba(0, 0, 255, 1)">this</span>.uname =<span style="color: rgba(0, 0, 0, 1)"> uname;
　　</span><span style="color: rgba(0, 0, 255, 1)">this</span>.age =<span style="color: rgba(0, 0, 0, 1)"> age;
}
Father.prototype.money </span>= <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">() {
　　console.log(</span>100000<span style="color: rgba(0, 0, 0, 1)">);
};</span></pre>
<div>　//子构造函数</div>
<div>　　function Son(uname, age , score){　</div>
<div>　　　　<span data-mce-="">//<span data-mce-=""> this 指向子构造函数的对象实例</span></span></div>
<div>
<div>　　　　Father.call(this, uname, age);</div>
<div>　　　　this.score = score;</div>
</div>
<div>  };</div>
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Son.prototype = Father.prototype; 这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化 </span>
Son.prototype = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Father();
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数 </span>
Son.prototype.constructor =<span style="color: rgba(0, 0, 0, 1)"> Son;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 这个是子构造函数专门的方法 </span>
Son.prototype.exam = <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">() {
　　console.log(</span>'孩子要考试'<span style="color: rgba(0, 0, 0, 1)">);
}
</span><span style="color: rgba(0, 0, 255, 1)">var</span> son = <span style="color: rgba(0, 0, 255, 1)">new</span> Son('刘德华', 18, 100<span style="color: rgba(0, 0, 0, 1)">);
console.log(son);</span></pre>
</div>
<p>　　</p>
<h2> 5.ES5新增方法</h2>
<p>　　5.1 forEach()遍历数组  没有返回值</p>
<p>　　　　array.forEach(function(value , index , array){....})</p>
<p>　　　　value是每个数组元素</p>
<p>　　　　index是每个元素索引值</p>
<p>　　　　array是当前数组</p>
<p>　　5.2 filter()筛选数组  其实也会遍历数组</p>
<p>　　　　array.filter(function(value , index , array){</p>
<p>　　　　　　return  条件表达式</p>
<p>　　　　})</p>
<p>　　　　返回的是一个新数组  括号跟的参数都是一样的</p>
<p>　　5.3 some()   查找数组中是否有满足条件的元素  其实也会遍历数组</p>
<p>　　　　array.some(function(value , index , array){</p>
<p>　　　　　　return  条件表达式</p>
<p>　　　　})</p>
<p> 　　　　返回值是布尔值，只要查找到第一个满足条件的元素就会终止循环效率高　　</p>
<p> </p>
<p> 　　5.4 trim方法去除字符串两端的空格</p>
<p>　　　　字符串的特性不可变性</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> str = ' hello '<span style="color: rgba(0, 0, 0, 1)"> ；
console.log(str.trim()）</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">hello 去除两端空格 </span>
<span style="color: rgba(0, 0, 255, 1)">var</span> str1 = ' he l l o '<span style="color: rgba(0, 0, 0, 1)"> ;
console.log(str1.trim()）</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">he l l o 去除两端空格</span></pre>
</div>
<p>　　5.5 获取对象的属性名 </p>
<p>　　　　Object.keys(对象) 获取到当前对象中的属性名，返回值是一个数组</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> obj =<span style="color: rgba(0, 0, 0, 1)"> {
id: </span>1<span style="color: rgba(0, 0, 0, 1)">,
pname: </span>'小米'<span style="color: rgba(0, 0, 0, 1)">,
price: </span>1999<span style="color: rgba(0, 0, 0, 1)">,
num: </span>2000<span style="color: rgba(0, 0, 0, 1)">
};
</span><span style="color: rgba(0, 0, 255, 1)">var</span> result =<span style="color: rgba(0, 0, 0, 1)"> Object.keys(obj);
console.log(result) </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">返回的新数组</span></pre>
</div>
<p>　　5.6 Object.defineProperty设置或修改对象中的属性</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">Object.defineProperty(对象，修改或新增的属性名，{
　　value:修改或新增的属性的值,
　　writable:</span><span style="color: rgba(0, 0, 255, 1)">true</span>/false,//如果值为false 不允许修改这个属性值
　　enumerable: <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)">enumerable 如果值为false 则不允许遍历 </span>
　　configurable: <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)">configurable 如果为false 则不允许删除这个属性属性是否可以被删除或是否可以再次修改特性 </span>
})</pre>
</div>
<p> </p>
<h2> 6.函数的定义和调用</h2>
<p>　　6.1 函数的定义方式</p>
<p>　　　　(1) function关键字（命名函数）</p>
<p>　　　　　　function fn(){......}</p>
<p>　　　　(2) 函数表达式(匿名函数)</p>
<p> 　　　　　　var fn = function(){......}</p>
<p>　　　　(3) 利用new function('参数1','参数2','函数体')</p>
<p>　　　　　　var f = new Function('a','b','console.log(a +b)');   //参数都必须是字符串格式</p>
<p>　　　　　　f( 3, 2);   //输出结果是5　</p>
<h4>　　所有函数都是Function的实例，函数也属于对象</h4>
<p>　　6.2 函数的调用方式</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)"> 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, 128, 1)"> 2</span> <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> fn(){
</span><span style="color: rgba(0, 128, 128, 1)"> 3</span> console.log('hello world'<span style="color: rgba(0, 0, 0, 1)">)
</span><span style="color: rgba(0, 128, 128, 1)"> 4</span> <span style="color: rgba(0, 0, 0, 1)">}
</span><span style="color: rgba(0, 128, 128, 1)"> 5</span> <span style="color: rgba(0, 0, 0, 1)">fn();
</span><span style="color: rgba(0, 128, 128, 1)"> 6</span>
<span style="color: rgba(0, 128, 128, 1)"> 7</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, 128, 1)"> 8</span> <span style="color: rgba(0, 0, 255, 1)">var</span> o =<span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 128, 1)"> 9</span> sayHi : <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, 128, 1)">10</span>       console.log('hello world'<span style="color: rgba(0, 0, 0, 1)">)
</span><span style="color: rgba(0, 128, 128, 1)">11</span> <span style="color: rgba(0, 0, 0, 1)"> }
</span><span style="color: rgba(0, 128, 128, 1)">12</span> <span style="color: rgba(0, 0, 0, 1)">}
</span><span style="color: rgba(0, 128, 128, 1)">13</span> <span style="color: rgba(0, 0, 0, 1)">o.sayHi();
</span><span style="color: rgba(0, 128, 128, 1)">14</span>
<span style="color: rgba(0, 128, 128, 1)">15</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 3.构造函数</span>
<span style="color: rgba(0, 128, 128, 1)">16</span> <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> Star(){};
</span><span style="color: rgba(0, 128, 128, 1)">17</span> <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Star();
</span><span style="color: rgba(0, 128, 128, 1)">18</span>
<span style="color: rgba(0, 128, 128, 1)">19</span>
<span style="color: rgba(0, 128, 128, 1)">20</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 4.绑定函数事件</span>
<span style="color: rgba(0, 128, 128, 1)">21</span> btn.onclick = <span style="color: rgba(0, 0, 255, 1)">function</span>(){}<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 点击了按钮就可以调用这个函数</span>
<span style="color: rgba(0, 128, 128, 1)">22</span>
<span style="color: rgba(0, 128, 128, 1)">23</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 5.定时器函数</span>
<span style="color: rgba(0, 128, 128, 1)">24</span> setInterval(<span style="color: rgba(0, 0, 255, 1)">function</span>(){},1000);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 这个函数定时器自动一秒钟调用一次</span>
<span style="color: rgba(0, 128, 128, 1)">25</span>
<span style="color: rgba(0, 128, 128, 1)">26</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">6.立即执行函数（自调用函数）</span>
<span style="color: rgba(0, 128, 128, 1)">27</span> (<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, 128, 1)">28</span>    console.log('hello world'<span style="color: rgba(0, 0, 0, 1)">)
</span><span style="color: rgba(0, 128, 128, 1)">29</span> })();</pre>
</div>
<p> </p>
<h2>7.this</h2>
<p>　　7.1 函数内部的this指向</p>
<p>　　　　一般情况下，this指向函数的调用者</p>
<p>　　　　<img src="https://img2018.cnblogs.com/blog/1665391/201909/1665391-20190904192045080-1391115369.png"></p>
<p>　　7.2 改变函数内部this的指向</p>
<p>　　　　1.call()方法</p>
<p>　　　　　　可以直接调用函数，也可以改变this的指向　　　　　</p>
<div>　　　　　　var o = {</div>
<div>　　　　　　　　name: 'andy'</div>
<div>　　　　　　}</div>
<div>　　　　　　function fn(a, b) {</div>
<div>　　　　　　　　console.log(this);</div>
<div>　　　　　　　　console.log(a+b)</div>
<div>　　　　　　};</div>
<div>　　　　　　fn(1,2)            // 此时的this指向的是window 运行结果为3</div>
<div>　　　　　　fn.call(o,1,2)  //此时的this指向的是对象o,参数使用逗号隔开,运行结果为3</div>
<p> 　　　　　  应用：经常做继承</p>
<p>　　　　2.apply()方法</p>
<p>　　　　　　可以直接调用函数，也可以改变this的指向　　</p>
<div>　　　　　　var o = {</div>
<div>　　　　　　　　name: 'andy'</div>
<div>　　　　　　}</div>
<div>　　　　　　function fn(a, b) {</div>
<div>　　　　　　　　console.log(this);</div>
<div>　　　　　　　　console.log(a+b)</div>
<div>　　　　　　};</div>
<div>　　　　　　fn()                      // 此时的this指向的是window 运行结果为3</div>
<div>　　　　　　fn.apply(o,)  //此时的this指向的是对象o,参数使用数组传递运行结果为3</div>
<p> 　　　　　　应用：跟数组有关</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)">// 利用apply借助数学内置对象求最大值等<br></span><span style="color: rgba(0, 0, 255, 1)">var</span> arr = ;</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> max =<span style="color: rgba(0, 0, 0, 1)"> Math.max.apply(Math,arr);</span>
console.log(max) <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 输出结果应该是56</span></pre>
</div>
<p>　　　　3.  bind()方法</p>
<p> 　　　　　　不会调用函数，但是可以改边this的指向，返回的是一个新函数　　　　</p>
<div>　　　　　　var o = {</div>
<div>　　　　　　　　name: 'andy';</div>
<div>　　　　　　};</div>
<div>　　　　　　function fn(a, b) {</div>
<div>　　　　　　　　console.log(this);</div>
<div>　　　　　　　　console.log(a + b);</div>
<div>　　　　　　};</div>
<div>　　　　　　var f = fn.bind(o, 1, 2);    //此处的f是bind返回的新函数</div>
<div>　　　　　　f();                                   //调用新函数 this指向的是对象o 参数使用逗号隔开</div>
<p>　　　　　　应用：不调用函数，但是还想改变this指向</p>
<p> 　　　　4. call、apply、bind三者区别</p>
<p>　　　　　　call和apply都是直接调用函数，可以改变this的指向</p>
<p>　　　　　　　　　call后面跟的参数是列表形式，apply跟的是数组形式</p>
<p>　　　　　　bind不会直接调用函数，也可以改变ths的指向</p>
<h2>8. 严格模式(strict mode)</h2>
<p>　　　　ES5 的严格模式是采用具有限制性 JavaScript变体的一种方式，即在严格的条件下运行 JS 代码。</p>
<p>　　　　8.1 为脚本开启严格模式</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">
(</span><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)">在当前的这个自调用函数中有开启严格模式，当前函数之外还是普通模式 </span>
      "use strict"<span style="color: rgba(0, 0, 0, 1)">;
      </span><span style="color: rgba(0, 0, 255, 1)">var</span> num = 10<span style="color: rgba(0, 0, 0, 1)">;
      </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> fn() {
      }
})();
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">或者 </span>
<script>
"use strict"<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)">当前script标签开启了严格模式 </span>
</script>
<script>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">当前script标签未开启严格模式</span>
</script> </pre>
</div>
<p>　　　　8.2 为函数开启严格模式</p>
<p>　　　　　　要给某个函数开启严格模式，需要把“use strict”; (或 'use strict'; ) 声明放在函数体所有语句之前。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> fn(){
</span>"use strict"<span style="color: rgba(0, 0, 0, 1)">;
   </span><span style="color: rgba(0, 0, 255, 1)">return</span> "123"<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)">当前fn函数开启了严格模式</span></pre>
</div>
<p>　　　　8.3 严格模式中的变化</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">'use strict';
num = 10 ;
console.log(num)//严格模式后使用未声明的变量
‐‐‐ ‐‐‐‐‐‐‐ ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
var num2 = 1;
delete num2;//严格模式不允许删除变量
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ ‐‐‐‐‐‐‐
function fn() {
console.log(this); // 严格模式下全局作用域中函数中的 this 是 undefined
}
fn();
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ ‐‐‐‐‐‐‐‐
function Star() {
this.sex = '男';
}
// Star();严格模式下,如果构造函数不加new调用, this 指向的是undefined 如果给他赋值则会报错.
var ldh = new Star();
console.log(ldh.sex);
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ ‐‐‐‐‐‐‐‐‐
setTimeout(function() {
console.log(this); //严格模式下，定时器 this 还是指向 window
}, 2000);
</pre>
</div>
<p>　</p>
<h2>9.高阶函数</h2>
<p>　　高阶函数是对其他函数进行操作的函数，可以接收函数作为参数或者将函数作为返回值输出。</p>
<p>　　函数也是一种数据类型，同样可以作为参数，传递给另外一个参数使用。最典型的就是作为回调函数。同理函数也可以作为返回值传递回来</p>
<h2>10.闭包(clsure)</h2>
<p>　　闭包是指有权访问另一个函数作用域中变量的函数。简单理解就是一个作用域可以访问另外一个函数内部的局部变量。</p>
<p>　　作用：延伸变量的作用范围，增长了变量的生命周期。</p>
<p>　　弊端：造成内存泄漏。(内存泄漏，就是本该销毁的数据没有销毁，造成内存浪费)</p>
<p>　　闭包里的经典面试题：</p>
<p>　　　　1. 遍历注册li的点击事件，利用闭包的实行，点击每一个li输出对应的索引</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> i = 0; i < lis.length; i++<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)"> 利用for循环创建了4个立即执行函数 </span><span style="color: rgba(0, 128, 0, 1)">
//</span><span style="color: rgba(0, 128, 0, 1)"> 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这个变量    <br>　　(function(i) {</span>
　　　　lis.onclick = <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">() {
　　　　　　console.log(i);
　　　　}
　　})(i); <br>}</span></pre>
</div>
<p>　　　　2. 遍历 1 ~ 5 5个数值，利用闭包，在setTimeout里面输入 1 ~ 5</p>
<p>　　</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">for (var i = 0; i < 5; i++) {
(function(i) {
      setTimeout(function() { <br>　　　　　　　　console.log(lis.innerHTML); <br>　　　　　}, 3000) <br>　　　})(i); <br>}
</pre>
</div>
<p>　　</p>
<h2>11.递归</h2>
<p> 　　如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。</p>
<p> 　　简单理解:函数内部自己调用自己, 这个函数就是递归函数</p>
<p>　　递归函数的作用和循环效果一样，很容易发生‘栈溢出’错误(stack overflow)，所以必须要加退出条件return。</p>
<p>　　1. 利用递归求1~n的阶乘</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">function fn(n){
if (n == 1) {
      return 1;
}
return n * fn(n -1)
}
console.log(fn(3))
</pre>
</div>
<p>　　　2.  利用递归求斐波那契数列(斐波那契数列就是前两个数的和等于第三个数字，也叫兔子数)</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">// 利用递归函数求斐波那契数列(兔子序列) 1、1、2、3、5、8、13、21...
// 用户输入一个数字 n 就可以求出这个数字对应的兔子序列值
// 我们只需要知道用户输入的n 的前面两项(n‐1 n‐2)就可以计算出n 对应的序列值

function fb(n){
if ( n== 2 || n== 1) {
      return 1;
}
return fb( n -1) + fb (n-2);
}
console.log(fb(3))
</pre>
</div>
<p>　　</p>
<h2>12.正则表达式</h2>
<p>　　12.1 什么是正则表达式？</p>
<p>　　　　正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。在JavaScript中，<span style="background-color: rgba(255, 204, 0, 1)">正则表达式也是对象</span></p>
<p>　　12.2 作用</p>
<p>　　　　 1.匹配  2. 替换 3.提取</p>
<h2>13.正则表达式在js中的使用</h2>
<p>　　1. 正则表达式的创建 </p>
<p>　　　　方式一：通过调用RegExp对象的构造函数创建</p>
<p>　　　　　　var reg = new RegExp(/123/);</p>
<p>　　　　　　console.log(reg);    // 输出结果 /123/</p>
<p>　　　　方式二：利用字面量创建</p>
<p>　　　　　　var rg = /123/;</p>
<p>　　2. 测试正则表达式</p>
<p>　　　　test()正则对象方法，用于检测字符串是否符合规则，该方法返回值是布尔类型，true或false，括号里的参数是字符串</p>
<p>　　　　var rg = /123/;</p>
<p>　　　　console.log(rg.test(123)); // 返回值是true</p>
<p>　　　　console.log(rg.test('abc')); // 返回值是false</p>
<p>　　3. 正则表达式中的特殊字符</p>
<p>　　　　3.1边界符（正则表达式中的边界符（位置符）用来提示字符所处的位置）</p>
<p>　　　　　　<img src="https://img2018.cnblogs.com/blog/1665391/201909/1665391-20190906195141957-1714025411.png"></p>
<p>　　　　　　如果 ^和 $ 在一起，表示必须是精确匹配</p>
<p>　　　　3.2 字符类 </p>
<p>　　　　　　　　<strong>[ ]</strong>方括号，表示有一系列字符可供选择，只要匹配到其中一个就可以了</p>
<p>　　　　　　　　　<img src="https://img2018.cnblogs.com/blog/1665391/201909/1665391-20190906203006372-662827795.png"></p>
<p>　　　　　　　　　<img src="https://img2018.cnblogs.com/blog/1665391/201909/1665391-20190906203136379-1173711047.png"></p>
<p>　　　　3.3 量词符</p>
<p>　　　　　　量词符用来设定某个模式出现的次数，都是写在某个模式的后面</p>
<p>　　　　　　<img src="https://img2018.cnblogs.com/blog/1665391/201909/1665391-20190906203402363-661240366.png"></p>
<p>　　　　　<span style="text-decoration: underline">　<strong>逗号前后都不能有空格</strong></span></p>
<p> </p>
<p><strong>　　　　</strong>3.4 括号总结</p>
<p>　　　　　　大括号{}  量词符，里面表示重复次数</p>
<p>　　　　　　中括号[]  字符集合，匹配中括号里面的任意字符</p>
<p>　　　　　　小括号() 表示优先级</p>
<p>　　　　3.5 预定义类</p>
<p>　　　　　　指的是某些常见模式的简写方式</p>
<p>　　　　　　<img src="https://img2018.cnblogs.com/blog/1665391/201909/1665391-20190906203838156-1124404409.png"></p>
<p>　　　　3.6 正则替换和正则提取</p>
<p>　　　　　　replace()方法可以实现替换字符串操作，用来替换的参数可以是一个字符串，也可以是一个正则表达式</p>
<p>　　　　　　注意：replace()是字符串的方法，并不是正则对象的方法</p>
<p>　　　　　　语法： obj.replace(参数1，参数2)</p>
<p>　　　　　　　obj是要选择的目标字符串，参数1是要被替换的字符串，可以是字符串也可以是正则表达式，参数2是替换之后的字符串</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> str = "abcd"<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)"> 把字符串里的a替换成哈哈</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> str1 = str.replace("a","哈哈"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> str2 = str.replace(/a/,"哈哈"<span style="color: rgba(0, 0, 0, 1)">);
console.log(str1); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">输出哈哈bcd</span>
console.log(str2); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">输出哈哈bcd<br><br></span></pre>
</div>
<p>　　　　　　match()可以进行提取，返回值是一个数组</p>
<p>　　　　　　语法：字符串.match(正则表达式)</p>
<p>　　　　　　str.match(/\w+@\w+\.\w+/g)  可以提取字符串里的所有邮箱</p>
<p> </p>
<p>　　　　　3.7 正则表达式参数</p>
<p>　　　　　　　　后面可以跟三种形式的参数</p>
<p>　　　　　　　　/表达式/g     表示全局匹配，就是可以将所有的某个字符都进行转换</p>
<p>　　　　　　　　/表达式i/　   忽略大小写</p>
<p>　　　　　　　　/表达式/gi　全局匹配+忽略大小写</p>
<p>　　　　　　　　<img src="https://img2018.cnblogs.com/blog/1665391/201909/1665391-20190906205739353-1194168046.png"></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div class="cnblogs_code" style="text-align: justify"> </div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/wsuyi/p/11443551.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript高级