title: JS高级基础

categories: Javascript
tag: JS
date: 2021-09-25 16:16:34

JS 高级

类和对象

对象

对象是由属性和方法组成的，特指某一个

  • 属性：表示事物的特征，在对象中用属性来表示
  • 方法：表示对象的行为，在对象中用方法来表示

类

抽出对象的公共部分，泛指某一大类。

类和对象举例

  1. 通过 class 关键字创建类，类型习惯性首字母大写
  2. 类里面有一个 constructor 函数，可以接受传递过来的参数，同时返回实例对象
  3. constructor 函数只要 new 生成实例时，就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数
  4. 生成实例的 new 不能省略
  5. 创建类的时候，类名后面不要加小括号。生成实例，类名后面要加小括号，构造函数不需要加 function
  1. class Star {
  2.   //1创建类
  3.   constructor(uname) {
  4.     this.uname = uname
  5.   }
  6. }
  7. // 2利用类创建对象
  8. var donghuan = new Star('董欢')
  9. console.log(donghuan.uname)

在类里面加方法

  1. 在类里面的所有的函数不需要写 function
  2. 多个函数方法之间不需要添加逗号间隔
  1. class Star {
  2.   //1创建类
  3.   constructor(uname) {
  4.     this.uname = uname
  5.   }
  6.   sing(song) {
  7.     console.log(this.uname + song)
  8.   }
  9. }
  10. // 2利用类创建对象
  11. var donghuan = new Star('董欢')
  12. console.log(donghuan.uname)
  13. donghuan.sing('哈哈哈哈')

类的继承

继承 extends

现实中的继承，子承父业。

程序中的继承，子类可以继承父类的一些方法和属性

  1. class Father {
  2.   //1创建类
  3.   constructor() {}
  4.   money() {
  5.     console.log(100)
  6.   }
  7. }
  8. class Son extends Father {}
  9. let son = new Son()
  10. son.money()

super 关键字

super 关键字可以访问和调用对象父类上的函数，可以调用父类的构造函数，也可以调用父类的普通函数

继承中的属性或者方法查找原则：就近原则

  1. 继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有，就先执行子类
  2. 继承中，如果子类里面没有这个方法，就去查找父类有没有这个方法，如果有，就执行父类这个方法
  3. 调用构造函数 
  1. class Father {
  2.   constructor(x, y) {
  3.     this.x = x
  4.     this.y = y
  5.   }
  6.   sum() {
  7.     console.log(this.x + this.y)
  8.   }
  9. }
  10. class Son extends Father {
  11.   constructor(x, y) {
  12.     super(x, y)
  13.   }
  14. }
  15. let son = new Son(1, 2)
  16. son.sum()
  1. 调用普通函数
  1. class Father {
  2.   say() {
  3.     console.log('我是father')
  4.   }
  5. }
  6. class Son extends Father {
  7.   say() {
  8.     super.say()
  9.   }
  10. }
  11. let son = new Son()
  12. son.say()
  1. 子类继承父类方法同时扩展自己方法

利用 super 调用父类的构造函数，super 必须在子类 this 之前调用

  1. class Father {
  2.   constructor(x, y) {
  3.     this.x = x
  4.     this.y = y
  5.   }
  6.   sum() {
  7.     console.log(this.x + this.y)
  8.   }
  9. }
  10. class Son extends Father {
  11.   constructor(x, y) {
  12.     super(x, y)
  13.     this.x = x
  14.     this.y = y
  15.   }
  16.   substract() {
  17.     console.log(this.x - this.y)
  18.   }
  19. }
  20. let son = new Son(5, 2)
  21. son.sum() //7
  22. son.substract() //3

总结：

  1. 由于类没有变量提升
  2. 所以必须先定义类，才能通过类实例化对象
  3. 类里面的共有属性和方法一定要加 this 使用

类里面 this 的指向问题

  1. constructor 里面的 this 指向实例对象，方法里面的 this 指向这个方法的调用者
  1. let that
  2. let that_
  3. class Father {
  4.   constructor(uname, age) {
  5.     console.log(this) //Father {}
  6.     that = this
  7.     this.uname = uname
  8.     this.age = age
  9.     this.btn.onclick = this.sing
  10.   }
  11.   sing() {
  12.     //这个sing里面的this指向的是btn这个按钮
  13.     //因为这个按钮调用了这个函数
  14.     console.log(this) //<button></button>
  15.     console.log(this.uname)
  16.   }
  17.   dance() {
  18.     // 这个dance里面指向的this是实例对象donghuan。
  19.     //因为donghuan调用了这个函数
  20.     that_ = this
  21.     console.log(this)
  22.   }
  23. }
  24. let donghuan = new Father('董欢')
  25. console.log(that === donghuan) //true
  27. donghuan.dance()
  28. console.log(that_ === donghuan) //true

那么怎么让 sing()指向实例化的对象呢？可以看到 that 是全局变量，我们可以在 sing 函数里面把**console.log(this.uname)**改为**console.log(that.uname)**

面向对象案例 Tab 栏

初始化

只要这个类实例化，就会调用 constructor 里面的方法.因此直接在 constructor 里面给元素绑定点击事件

  1. class Tab {
  2.   constructor(id) {
  3.     this.main = document.getElementById(id)
  4.     this.lis = this.main.querySelectorAll('li')
  5.     this.sections = this.main.querySelectorAll('section')
  6.     this.init()
  7.   }
  8.   init() {
  9.     for (let i = 0; i < this.lis.length; i++) {
  10.       this.lis[i].index = i
  11.       this.lis[i].onclick = function () {}
  12.     }
  13.   }
  14.   //1切换功能
  15.   toggleTab() {}
  16.   //2添加功能
  17.   addTab() {}
  18.   //3删除功能
  19.   removeTab() {}
  20.   //3修改功能
  21.   editTab() {}
  22. }
  23. //实例化
  24. new Tab('#tab')

切换功能

  1.         //1切换功能
  2.     toggleTab() {
  3.             /**
  4.              *注意事项：
  5.              *1. 由于在这个函数中的this是li元素，不具备lis和sections元素
  6.              *2. 所以我们应该声明一个全局变量that保存指向的实例化的这个对象
  7.              *3. 然后在这个函数中调用lis和sections
  8.              */
  9.             // 先清除样式
  10.             that.clearClass()
  11.                 //让点中的这个类，隐藏下边框
  12.             this.className = 'liactive'
  14.             that.sections[this.index].className = 'conactive'
  15.         }

添加功能

  1. 点击+可以实现添加新的选项卡和内容
  2. 第一步，创建新的选项卡 li 和新的内容 section
  3. 然后把创建的两个元素追加到对应的父元素中
    利用的是**insertAdjacentHTML()**方法
    • 'beforebegin'：元素自身的前面。
    • 'afterbegin'：插入元素内部的第一个子节点之前。
    • 'beforeend'：插入元素内部的最后一个子节点之后。
    • 'afterend'：元素自身的后面。

注意：由于我们新加入的 li 和 section 并没有被获取为 lis 和 sections 的子集。因此我们就把获取元素重新设为一个函数

  2.     init() {
  3.             //init初始化操作让相关元素绑定事件
  4.             this.updateNode()
  5.             this.add.onclick = this.addTab
  6.             for (let i = 0; i < this.lis.length; i++) {
  7.                 this.lis[i].index = i
  8.                 this.lis[i].onclick = this.toggleTab
  9.             }
  10.         }
  11. //获取所有li和section
  12.     updateNode() {
  13.             this.lis = this.main.querySelectorAll('li')
  14.             this.sections = this.main.querySelectorAll('section')
  15.         }
  17. //2添加功能
  18.     addTab() {
  19.             //首先把兄弟li和兄弟section取消样式
  20.             that.clearClass()
  21.                 //1. 创建li元素和section元素
  22.             var li = '<li class="liactive">新选项卡</li>'
  23.             var section = '<section class="conactive>新内容</section>'
  24.                 //2. 把创建的li和section追加到对应的父元素
  25.                 //注意：因为addTab是按钮调用的，所以我们要用that
  26.             that.ul.insertAdjacentHTML('beforeend', li)
  27.             that.fsection.insertAdjacentHTML('beforeend', section)
  28.             this.init()
  29.         }

删除功能

  2.         //获取所有li和section
  3.         // 因为我们动态添加元素，会获取所有的li，所以li和关闭按钮个数一致
  4.     updateNode() {
  5.             this.lis = this.main.querySelectorAll('li')
  6.             this.sections = this.main.querySelectorAll('section')
  7.                 //拿到所有删除按钮
  8.             this.remove = this.main.querySelectorAll('.icon-guanbi')
  9.         }
  12. //3删除功能
  13.     removeTab(e) {
  14.             //由于点击删除按钮，但是父元素的li也有点击事件，我们不希望这样
  15.             // 所以就阻止冒泡，返回li的点击切换事件
  16.             e.stopPropagation()
  17.                 // 虽然删除按钮没有索引号，但是删除按钮的父元素li有
  18.             var index = this.parentNode.index
  19.                 // 用remove可以直接删除
  20.             that.lis[index].remove()
  21.             that.sections[index].remove()
  22.             that.init()
  23.         }

我们希望：

  • 当我们删除的不是一个选定状态的 li 的时候，我们想要原来选定的还是依旧选定
  • 当我们删除了一个选定状态的 li 的时候，想要它的前一个 li 赋予选定状态 
  1.        //3删除功能
  2.     removeTab(e) {
  3.             //由于点击删除按钮，但是父元素的li也有点击事件，我们不希望这样
  4.             // 所以就阻止冒泡，返回li的点击切换事件
  5.             e.stopPropagation()
  6.                 // 虽然删除按钮没有索引号，但是删除按钮的父元素li有
  7.             var index = this.parentNode.index
  8.                 // 用remove可以直接删除
  9.             that.lis[index].remove()
  10.             that.sections[index].remove()
  11.             that.init()
  12.                 //当我们不是删除的选定状态的li的时候，原来的选定状态的li保持不变就可以了
  13.             if (document.querySelector('.liactive')) return //直接return之后下面的代码就不会执行了
  14.                 //，当我们删除的选定状态的li，我们希望，当我们删除了一个li的时候，想要它的前一个li赋予选定状态
  15.             index--
  16.             //手动调用我们的点击事件，不需要鼠标触发
  17.             // 表示前面为真，就去调用后面这个
  18.             that.lis[index] && that.lis[index].click()
  19.         }

修改操作

双击事件：dbclick

但是如果双击之后，会默认把文字选中，我们希望不要将文字选中

window.getSelection?window.getSelection().removeAllRanges():document.selection.empty()

当我们双击文字的时候，在里面生成一个文本框，当失去焦点或者按下回车，就把文本框输入的值给原先的元素即可。

  1.     init() {
  2.             //init初始化操作让相关元素绑定事件
  3.             this.updateNode()
  4.             this.add.onclick = this.addTab
  5.             for (let i = 0; i < this.lis.length; i++) {
  6.                 this.lis[i].index = i
  7.                 this.lis[i].onclick = this.toggleTab
  8.                     //给每一个按钮增加点击关闭事件
  9.                 this.remove[i].onclick = this.removeTab
  10.                     //给每一个span添加双击事件。双击之后就编辑这个tab
  11.                 this.spans[i].ondbclick = this.editTab
  12.                     //给每一个section添加双击事件。双击之后就编辑这个tab
  13.                 this.sections[i].ondbclick = this.editTab
  14.             }
  15.         }
  17. //3修改功能
  18.     editTab() {
  19.         //双击禁止选定文字
  20.         window.getSelection ?
  21.             window.getSelection().removeAllRanges() :
  22.             document.selection.empty()
  23.             // 因为这里是在span中添加，所以直接是this，不使用that
  24.             //保存以前tab中的文字
  25.         var str = this.innerHTML
  26.         this.innerHTML = '<input type="text">'
  27.         var input = this.children[0]
  28.             //让文本框中出现之前的文字
  29.         input.value = str
  30.         input.select() //让文本框中的文字处于选定状态
  31.             //当我们离开文本框，就把文本框里面的值给span
  32.         input.onblur = function() {
  33.                 this.parentNode.innerHTML = this.value
  34.             }
  35.             //按下回车也可以把文本框里面的值给span
  36.         input.onkeyup = function() {
  37.             if (e.keyCode === 13) {
  38.                 //手动调用鼠标点击事件
  39.                 this.blur()
  40.             }
  41.         }
  42.     }

好了，以上就是面向对象的例子，已经完成了。

构造函数和原型

构造函数和原型

构造函数

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一起使用，我们可以把对象中一些公共属性和方法抽取出来，然后封装在这个函数里面。

new 在执行时会做 4 件事情

  1. 在内存中创建一个新的对象
  2. 让 this 指向这个新的对象
  3. 执行构造函数里面的代码，给这个新对象添加属性和方法
  4. 返回这个新对象（所以构造函数里面不需要 return）

动态（实例）成员

实例成员就是构造函数内部通过 this 添加的成员，uname，age,sing 就是实例成员

实例成员只能通过实例化的对象来访问

  1. function Star(uname, age) {
  2.   //uname，age,sing就是实例成员
  3.   this.uname = uname
  4.   this.age = age
  5.   this.sing = function () {
  6.     console.log('我会唱歌')
  7.   }
  8. }
  9. var dh = new Star('董欢', 18)
  10. console.log(dh.uname) //通过实例化的对象
  11. console.log(Star.uname) //比如这个：不可以通过构造函数来访问实例成员

静态成员

在构造函数本身添加的成员

  1. // 静态成员表示的是，直接在构造函数上添加的成员，sex就是静态成员
  2. Star.sex = '女'
  3. console.log(Star.sex) //静态成员只能通过对象来访问

构造函数的问题

当构造函数里面有函数的话，当我们实例化一个对象，就得重新开辟一个空间再去放对应的函数，存在浪费内存的问题。

按道理，我们使用的是同一个函数。所以就引入了下面的 prototype

prototype 原型

构造函数通过原型分配的函数就是所有对象所共享的

JS 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象，注意这个 prototype 就是一个对象，这个对象的所有属性和方法都会被构造函数所拥有。

我们可以把那些不变的方法，直接定义到原型对象上，这样所有的对象的实例就可以共享这些方法

  1. Star.prototype.sing = function () {
  2.   console.log('我会唱歌')
  3. }

所以此时这个地方就是 true 啦。

  1. console.log(dh.sing() == gwk.sing()) //true
  1. 1. 原型是什么？
  2.   一个对象，我们也称prototype为原型对象
  3. 2. 原型的作用是什么？
  4.   共享方法

一般情况下，我们的公共属性定义到构造函数里面，公共的方法我们放到原型对象里面

对象原型__proto__

对象都会有一个属性 proto ，指向构造函数的 prototype 原型对象，之所以我们我们的对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 proto 原型的存在。

  1. console.log(dh.__proto__ === Star.prototype) //true

因此方法查找规则：

  1. 先看 dh 对象上是否有 sing 方法，如果有就执行这个对象上的 sing
  2. 如果没有 sing 这个方法，因为有**__proto__**的存在，就去构造函数原型对象身上去找 sing 这个方法。

constructor 构造函数

对象原型（__proto__）和构造函数（prototype）原型对象里面都有一个属性，constructor 属性，constructor 我们称为构造函数，因为它指回构造函数本身。

  1. console.log(Star.prototype.constructor) //是构造函数本身
  2. console.log(dh.__proto__.constructor) //是构造函数本身

constructor 主要用于记录该对象引用于那个构造函数，它可以让原型对象重新指向原来的构造函数

  1.     //很多情况下，我们需要手动的利用constructor这个属性指回原来的构造函数
  2.     //当我们使用对象,新添加的对象会把原来的prototype覆盖掉
  3. Star.prototype = {
  4.     constructor: Star,
  5.     sing: function() {
  6.         console.log('我会唱歌')
  7.     },
  8.     movie: function() {
  9.         console.log('我会拍电影')
  10.     }

构造函数和实例和原型对象三者的关系

构造函数里面都会有原型对象

  1. 是通过prototype指向原型对象prototype,
  2. 原型对象里面有一个constructor指回了构造函数。
  3. 原型对象里面也有__proto__指向的是Object构造函数的原型对象prototype
  4. 而Object的原型对象prototype通过constructor指向的是Object构造函数
  5. Object的原型对象prototype自然也有__proto__，这时候指向的是 null。

当我们 new 了一个构造函数就会创建一个实例对象。

  1. 在这个实例里面有一个对象原型__proto__指向原型对象prototype.
  2. 当然在这个对象实例的constructor可以通过原型对象再指回构造函数

原型链

1 JS高级 - 图1

成员查找机制

  1. 当访问一个对象的属性和方法时，首先查找这个对象自身有没有该属性或者方法
  2. 如果没有就查找它的原型（也就是__proto__指向的prototype原型对象）
  3. 如果还没有，就查找原型对象的原型(Object的原型对象)
  4. 以此类推一直到找到Object为止(null)
  5. __proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线
  6. 如果对象本身就有这个属性或者我方法，就不会向上查找。

原型对象 this 指向

  1. 在构造函数中，里面的 this 指向的对象实例 dh
  1. var dh = new Star('董欢', 18)
  1. 原型对象里面的 this 也是指向对象实例
  1. Star.prototype.sing = function () {
  2.   console.log('wohuichangge ')
  3.   that = this
  4. }
  6. dh.sing()
  7. console.log(that === dh) //true

扩展内置对象

可以通过原型对象，对原来的内置对象进行扩展自定义的方法，比如给数组增加求和的功能。

  1. console.log(Array.prototype)
  2. Array.prototype.sum = function () {
  3.   let sum = 0
  4.   for (let i = 0; i < this.length; i++) {
  5.     sum += this[i]
  6.   }
  7.   return sum
  8. }
  9. var arr = [1, 2, 3]
  10. console.log(arr.sum())
  11. var arr1 = new Array(11, 22, 33)
  12. console.log(arr1.sum())

继承

ES6 之前并没有给我们提供 extends 继承，我们可以通过构造函数+原型对象模拟实现继承，被称为组合继承。

call()

调用这个函数，并且修改函数运行时的 this 指向

  1. fun.call(thisArg, arg1, arg2)
  • thisArg:当前调用函数 this 的指向对象
  • arg1,arg2表示传递的其它参数
  1. call 可以调用函数
  1. //1. call可以调用函数
  2. fn.call()
  1. 可以调用它改变这个函数的 this 指向，此时这个函数的指向就指向了 o.通俗的解释就是打电话叫 o 来调用
  1. function fn() {
  2.   console.log('我想喝水')
  3.   console.log(this) //window
  4. }
  5. var o = {
  6.   name: 'andy'
  7. }
  9. //1. call可以调用函数
  10. fn.call()
  11. //2. call可以改变这个函数的this指向,此时这个函数的指向就指向了o
  12. fn.call(o)
  1. 传递参数
  1. function fn(x, y) {
  2.   console.log('我想喝水')
  3.   console.log(this) //window
  4.   console.log(x + y) //3
  5. }
  6. var o = {
  7.   name: 'andy'
  8. }
  10. //3. 传递参数
  11. fn.call(o, 1, 2)

借用构造函数继承父类型属性

子构造函数继承父构造函数的属性

  1. //1。 父构造函数
  2. function Father(uname, age) {
  3.   // this指向父构造函数里面的对象实例
  4.   this.uname = uname
  5.   this.age = age
  6. }
  7. //2. 子构造函数
  8. function Son(uname, age, score) {
  9.   // this指向子构造函数里面的对象
  10.   // 调用了父构造函数，然后把子构造函数的this传递给父构造函数
  11.   Father.call(this, uname, age)
  12.   //也可以自己添加属性
  13.   this.score = score
  14. }
  15. var son = new Son('董欢', 18, 100)
  16. console.log(son) //此时son里面有uname,age,score这两个属性

子构造函数继承父构造函数的方法

  1. （写在原型对象上）

首先声明，这种方法是有问题的。这样子直接赋值的话，如果直接修改了子原型对象，父原型对象也会跟着一起变化

（借用父构造函数继承实际意义并不是真正的继承，只是 this 的指向发生了改变，父构造函数原型上的属性和方法子类都得不到）

要是我们使用父构造函数的方法，就把方法定义在原型上。然后赋值给子构造函数，但是，子构造函数自己的原型对象上的方法虽然不会被覆盖，但是子构造函数的原型对象里的方法也会给父构造函数的原型对象上。

  1. Father.prototype.money = function () {
  2.   console.log(10000)
  3. }
  4. //2. 子构造函数
  5. function Son(uname, age, score) {
  6.   // this指向子构造函数里面的对象
  7.   // 调用了父构造函数，然后把子构造函数的this传递给父构造函数
  8.   Father.call(this, uname, age)
  9.   //也可以自己添加属性
  10.   this.score = score
  11. }
  13. Son.prototype = Father.prototype

子构造函数原型对象引用的父构造函数的原型对象。因此就会修改父构造函数的原型对象。

  1. Son.prototype = Father.prototype
  2. Son.prototype.exam = function () {
  3.   console.log('考试')
  4. }
  5. //此时父构造函数里面也有这个方法
  6. console.log(Father.prototype)
  1. 通过 Father 的实例对象继承父构造函数

1 JS高级 - 图2

  1. Son.prototype = new Father()
  2. //如果利用了对象的形式修改了原型对象，别忘了利用constructor指回原来的对象
  3. Son.prototype.constructor = Son

实例对象和原型对象的地址是不一样的。

类的本质

ES6 之前通过构造函数+原型实现面向对象编程

ES6 通过类实现面向对象编程

类的本质其实还是一个函数，我们也可以简单的认为类就是构造函数的另外一种写法

  1. class Star {}
  2. console.log(typeof Star) //function

那么构造函数有哪些特点呢？

  1. 构造函数有原型对象prototype
  2. 构造函数原型对象prototype里面有constructor指向的构造函数本身
  3. 构造函数可以通过原型对象添加方法
  4. 构造函数创建的实例对象有__proto__原型指向 构造函数的原型对象

那么类呢？

  1. console.log(typeof Star) //function
  2. //1. 类有原型对象
  3. console.log(Star.prototype)
  4. //2. 类里面原型对象prototype里面有constructor指向的构造函数本身
  5. console.log(Star.prototype.constructor)
  6. //3. 类可以通过原型对象添加方法
  7. Star.prototype.sing = function () {
  8.   console.log('冰雨')
  9. }
  10. //4. 构造函数创建的实例对象有__proto__原型指向，构造函数的原型对象
  11. let dh = new Star()
  12. console.log(dh) //Star {}
  13. console.log(dh.__proto__ === Star.prototype) //true

总结：

ES6 的绝大部分功能。ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰，更像面向对象编程的语法而已。所以 ES6 的类其实就是语法糖

ES5 新增的方法

ES5 给我们新增了一些方法，可以很方便的操作数组或字符串，这些方法主要包括：

  1. 数组方法
  2. 字符串方法
  3. 对象方法

数组方法

迭代遍历方法

1. forEach()

  • currentValue:数组当前项的值
  • index:数组当前项的索引
  • arr : 数组本身
  1. let arr = [1, 2, 3]
  2. let sum = 0
  3. arr.forEach((value, index, array) => {
  4.   console.log('值' + value)
  5.   console.log('索引' + index)
  6.   console.log(array)
  7.   sum += value
  8. })
  9. console.log(sum)

2. map()

map 和 forEach 类似，但是 map 会返回的新数组

  1. let arr = [1, 2, 3, 4]
  2. let result = arr.map((value, index, array) => {
  3.   return value + 60
  4. })
  5. console.log(result) //[ 61, 62, 63, 64 ]

3. filter()

filter 是创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组。

他直接返回一个新数组，不会影响原来的数组

  • currentValue:数组当前项的值
  • index:数组当前项的索引
  • arr : 数组本身
  1. let arr = [20, 34, 54, 12]
  2. let result = arr.filter((value, index, array) => {
  3.   return value > 20
  4. })
  5. console.log(result) //34,54

4. some()

查找数组中是否有满足条件的元素，如果找到了第一个满足条件的元素就终止循环，不再继续查找。

  • currentValue:数组当前项的值
  • index:数组当前项的索引
  • arr : 数组本身
  1. let arr = [20, 34, 54, 12]
  2. let result = arr.some((value, index, array) => {
  3.   return value > 60
  4. })
  5. console.log(result) //false

filter 也是查找满足条件的元素，返回的是一个数组，而且是把所有满足条件的元素返回回来

some 也是查找满足条件的元素是否存在，返回的是一个布尔值，、如果查找到了第一个满足条件的元素就不查找了

5. every()

every()表示这个数组必须全部满足条件。查到了第一个符合的，还会继续查找。查找其中一个不符合的，就直接 false

  1. let arr = [1, 2, 3, 4]
  2. let result = arr.every((value, index, array) => {
  3.   return value > 3
  4. })
  5. console.log(result) //false

forEach 和 some、filter 区别

forEach 会一直遍历完。some 找到了就不会遍历。

  1. 在 forEach 里面 return true。forEach 会一直遍历完
  2. 在 some 里面遇到了 return true。就不会继续遍历
  3. 在 filter 里面遇上了 return true，也还是会继续遍历完

trim()去除字符串两端空白字符

  1. //去除两边的空格
  2. let str = '          h  a             '
  3. console.log(str)
  4. let str1 = str.trim()
  5. console.log(str1)

Object.defineProperty 方法

Object.defineProperty(obj, prop, descriptor)

  • obj: 必需，目标对象
  • prop : 必需，需要定义或者修改的属性名字
  • descriptor ： 必需，目标属性所拥有的特性

其中第三个尝试descriptor说明：应该以对象形式书写

  • value:设置属性的值，默认为undefined
  • writeable:值是否可以重写，true|false
  • enumerable:目标属性是否可以被枚举，true|false,默认为false
  • configurable：目标属性是否可以被删除或是否可以再次修改特性，true｜false，默认为false
  1. 关于value,表示加入的属性的值
  1. // 也就是给我们的obj新增了一个num属性，他的值为1000
  2. Object.defineProperty(obj, 'num', {
  3.   value: 1000
  4. })
  5. console.log(obj) //此时就添加进去了
  7. // 已有属性就是修改
  8. Object.defineProperty(obj, 'price', {
  9.   value: 99
  10. })
  11. console.log(obj) //此时就修改完成
  1. writeable表示是否可被修改
  1. Object.defineProperty(obj, 'id', {
  2.   //表示不允许被修改
  3.   writable: false
  4. })
  5. obj.id = 2
  6. console.log(obj) //此时id不会发生改变
  1. enumerable表示是否能被遍历,默认为false.可以使用Object.keys()进行遍历
  1. Object.defineProperty(obj, 'address', {
  2.   //表示不允许被修改
  3.   value: '四川省成都市',
  4.   enumerable: false
  5. })
  7. console.log(Object.keys(obj)) // ['id', 'pname', 'price']
  1. configurable默认为false如果为false,则不允许被删除，不允许被修改特性。
  1. Object.defineProperty(obj, 'address', {
  2.   //表示不允许被修改
  3.   value: '四川省成都市',
  4.   enumerable: false,
  5.   // 不允许被删除或者重新设定特性
  6.   configurable: false
  7. })

函数进阶

1. 函数定义方式

  1. function 关键字
  2. 函数表达式
  3. new Function(). (不推荐)
  1. //1.
  2. function fn() {}
  3. //2.
  4. var fun = function () {}
  5. //3.
  6. var f = new Function('a', 'b', 'console.log(a+b)')
  7. f(1, 2)

因此，所有的函数都是 Function 的实例（对象）

所以函数也属于是是对象

  1. console.dir(f instanceof Object) //true

1 JS高级 - 图3

2. 函数调用

6 种函数调用的方法

  1. //1. 调用普通函数
  2. function fn() {
  3.   console.log('调用普通函数')
  4. }
  5. fn.call()
  6. //2. 调用对象里面的方法
  7. var o = {
  8.   sayHi: function () {
  9.     console.log('调用对象')
  10.   }
  11. }
  12. o.sayHi()
  13. //3. 调用构造函数
  14. function Star() {}
  15. new Star()
  16. //4. 绑定事件函数
  17. btn.onclick = function () {} //点击了按钮就可以调用
  18. //5. 定时器调用
  19. //这个是定时器隔一分钟自动调用
  20. setInterval(function () {}, 1000)(
  21.   //6. 立即执行函数
  22.   function () {
  23.     console.log('自动调用')
  24.   }
  25. )()

3 this 指向

6 种函数的 this 指向，因为调用方式不同，决定了 this 指向的不同

  1. //1. 调用普通函数
  2. // 普通函数的this指向window
  3. function fn() {
  4.   console.log('调用普通函数')
  5.   //指向window
  6.   console.log(this)
  7. }
  8. fn()
  9. //2. 调用对象里面的方法
  10. // 对象里面的this指向对象o
  11. var o = {
  12.   sayHi: function () {
  13.     console.log('调用对象')
  14.   }
  15. }
  16. o.sayHi()
  17. //3. 调用构造函数
  18. // 构造函数里面的this指向实例对象dh
  19. // 原型对象指向的也是实例对象
  20. function Star() {}
  21. // 原型对象指向的也是实例对象
  22. Star.prototype.sing = function () {}
  23. let dh = new Star()
  24. //4. 绑定事件函数
  25. // 指向btn这个函数调用者
  26. btn.onclick = function () {} //点击了按钮就可以调用
  27. //5. 定时器调用
  28. //这个是定时器隔一分钟自动调用
  29. // 定时器里面指向的是window
  30. setInterval(function () {}, 1000)(
  31.   //6. 立即执行函数
  32.   // this指向的是window
  33.   function () {
  34.     console.log('自动调用')
  35.   }
  36. )()
调用方式 this 指向
普通函数调用 window
构造函数调用 实例对象，原型对象里面的方法也指向实例对象
对象方法调用 该方法所属对象
事件绑定方法调用 绑定事件对象
定时器函数 window
立即执行函数 window

4 改变 this 的指向

call()、apply()、bind()

  • call()方法
  1. call()可以调用函数和改变 this 的指向。
  2. call 的主要作用可以实现继承
  1. function Father(uname, age) {
  2.   this.uname = uname
  3.   this.age = age
  4. }
  6. function Son(uname, age) {
  7.   Father.call(this, uname, age)
  8. }
  9. let son = new Son('董欢', '女')
  10. console.log(son)
  • apply()方法

apply()方法调用一个函数，简单理解为调用函数的方式，但是它可以改变 this 的指向

  1. fun.apply(thisArg, [argArray])
  • this.Arg:在 fun 函数运行时指定的 this 值
  • argsArray:传递的值，必需包含在数组里面
  • 返回值就是函数的值，因为它就是调用函数

apply 和 call 的区别就是，apply 接收的是数组形式。

  1. var o = {
  2.   name: 'andu'
  3. }
  5. function fn(arr) {
  6.   console.log(this)
  7.   console.log(arr) //dh
  8. }
  9. fn.apply(o, ['dh'])

apply 的主要应用

  1. 我么可以利用 apply 借助于数学内置对象求最大值
  1. var arr = [1, 66, 3, 99]
  2. var max = Math.max.apply(Math, arr)
  3. var min = Math.min.apply(Math, arr)
  4. console.log(max, min)
  • bind()方法

bind 不会调用函数，但是能改变函数内部 this 指向

  1. fun.bind(thisArg, arg1, arg2)
  1. thisArg:在 fun 函数运行时指定的 this 值
  2. arg1,arg2 传递的其他参数
  3. 返回由指定的 this 值和初始化参数改造的原函数拷贝
  1. var f = fn.bind(o)
  2. f()

在开发中，我们经常使用 bind.

因为我们有的函数我们不需要立即调用，但是又想改变这个函数内部的 this 指向，此时用 bind。

  1. 比如我们有一个按钮，当我们点击了之后就禁用这个按钮，3 秒钟之后开启这个按钮。但是定时器里面的 this 是 window。所以我们需要改变
  1. let btn = document.querySelector('button')
  2. btn.onclick = function () {
  3.   this.disabled = true //这个this指向的btn
  4.   setTimeout(
  5.     function () {
  6.       //如果没有加bind更改指向的话就不可以这样写，定时器里面的this指向的是window。没有disabled这个属性
  7.       this.disabled = false
  8.       //我们想要this指向btn,又不想让他们立即调用，所以使用bind
  9.     }.bind(btn),
  10.     3000
  11.   )
  12. }
  1. 当有多个按钮时.通过 bind 就可以实现对应的按钮点击事件了。
  1. let btns = document.querySelectorAll('button')
  2. for (let i = 0; i < btns.length; i++) {
  3.   btns[i].onclick = function () {
  4.     this.disabled = true //这个this指向的btn
  5.     setTimeout(
  6.       function () {
  7.         this.disabled = false
  8.       }.bind(this), //这个this就是指向的对应的btn
  9.       3000
  10.     )
  11.   }
  12. }

bind()应用

之前做 tab 栏案例的时候，我们用的全局变量 that，通过 bind 我们可以把大一点的 this 通过参数传递，而函数本身的 this 不变就可以啦。

call、apply、bind 总结

相同点：

都可以改变 this 的指向

区别点：

  1. call 和 apply 会调用函数，并且会改变函数内部 this 指向
  2. call 和 apply 传递的参数不一样，call 传递参数 arg1,arg2 形式，aplly 必需时数组形式[arg1,arg2]
  3. bind 不会调用函数,可以改变 this 指向

主要应用场景

  1. call 经常做继承
  2. apply 经常和数组有关系
  3. bind 不调用函数，还想改变函数内部 this 指向

严格模式

什么是严格模式？

ES5 的严格模式是采用具有限制性 JS 变体的一种方式，即在严格的条件下运行 JS 代码。

做了以下更改

  1. 消除了 JS 语法的一些不合理、不严谨之处，减少了一些怪异行为。
  2. 消除了代码运行的不安全之处
  3. 提高编译器效率，增加运行速度
  4. 禁用了保留字做变量，比如 class,enum，export, extends，import 等不能做变量名

开启严格模式

严格模式可以应用到整个脚本或者个别函数中，因此在使用时，我们可以把严格模式分为为脚本开启严格模式和为函数开启严格模式

  1. 为脚本开启严格模式
  1. <script>'use strict'; // 下面的JS代码就会按照严格模式执行代码</script>
  1. 为函数开启严格模式
  1. function fn() {
  2.   'use strict'
  3.   //下面的代码按照严格模式执行
  4. }
  5. function fun() {
  6.   //里面的代码还是按照普通模式执行
  7. }

严格模式的变化

  1. 变量必需先声明再使用
  2. 我们不能删除声明好的变量
  3. 严格模式下的函数里面的 this 是 undefined，而不是 window
  1. function fn() {
  2.   console.log(this) //undefined
  3. }
  4. fn()
  1. 定时器里面的 this 还是指向 window
  2. 事件。对象还是指向调用者

高阶函数

高阶函数是对其他函数进行操作的函数，它接受函数作为参数或将函数作为返回值输出

  1. 以函数作用参数
  1. function fn(a, b, callback) {
  2.   console.log(a + b)
  3.   callback && callback()
  4. }
  5. fn(1, 2, function () {
  6.   console.log('我是最后调用的')
  7. })
  8. /**调用结果
  9.      * 3
  10.        我是最后调用的
  11.      */
  1. 以函数作为返回值
  1. function fn() {
  2.   return function () {}
  3. }
  4. fn()

闭包

变量作用域

变量根据作用域的不同分为两种，全局变量和局部变量

  1. 函数内部可以使用全局变量
  2. 函数外部不可以使用局部变量
  3. 当函数执行完毕，本作用域内的局部变量会销毁

什么是闭包

闭包是指一个函数有权访问另一个函数作用域中变量,变量所在的函数

  1. // 我们fun函数这个作用域访问了另一个函数fn里面的局部变量num，变量所在的函数就是闭包，fn就是闭包
  2. function fn() {
  3.   let num = 10
  5.   function fun() {
  6.     console.log(num)
  7.   }
  8.   fun()
  9. }
  10. fn()

闭包的作用

我们 fn 外面的作用域可以访问 fn 内部的局部变量

  1. function fn() {
  2.   let num = 10
  4.   function fun() {
  5.     console.log(num)
  6.   }
  7.   return fun
  8. }
  9. var f = fn()
  10. //相当于
  11. // var f = function fun() {
  12. //     console.log(num)
  13. // }
  14. f() //10

闭包的主要作用，延伸了变量的作用范围。（孩子偷了爸爸的变量给外人用）

闭包案例

案例 1. 点击 li 就打印相对应的索引

  1. for (var i = 0; i < lis.length; i++) {
  2.   lis[i].index = i
  3.   lis[i].onclick = function () {
  4.     // for循环是个同步任务，会立马执行，所以i是4,
  5.     //当我们点击小li的时候，for循环已经执行完了。所以都是4
  6.     console.log(i) //4
  7.   }
  8. }

点击 li 输出当前 li 的索引号.此时这个立即函数就是闭包，因为 onclick 后执行的函数用了立即执行函数里面的变量 i

  1. //利用闭包的方式得到当前小li的索引号
  2. for (var i = 0; i < lis.length; i++) {
  3.   // 利用for循环创建了4个立即执行函数
  4.   ;(function (i) {
  5.     lis[i].onclick = function () {
  6.       console.log(i)
  7.     }
  8.   })(i)
  9. }

闭包会有内存泄漏的问题

案例 2. 3 秒之后打印 li 里面的内容,for 是同步任务，计时器是异步任务。

  1. for (var i = 0; i < lis.length; i++) {
  2.   ;(function (i) {
  3.     setTimeout(function () {
  4.       console.log(lis[i].innerHTML)
  5.     }, 3000)
  6.   })(i)
  7. }

案例 3. 计算打车价格

此时这个立即执行函数是闭包

  1. // 打车起步价13元（3公里内），之后每多一公里增加5元，用户输入公里数就可以计算打车价格
  2. //如果有拥堵情况，总价格多收10元拥堵费
  3. var car = (function () {
  4.   var start = 13 //起步价
  5.   var total = 0 //总价
  6.   return {
  7.     //正常的总价
  8.     price: function (n) {
  9.       if (n <= 3) {
  10.         total = start
  11.       } else {
  12.         total = start + (n - 3) * 5
  13.       }
  14.       return total
  15.     },
  16.     //拥堵之后的费用
  17.     yd: function (flag) {
  18.       return flag ? total + 10 : total
  19.     }
  20.   }
  21. })()
  23. console.log(car.price(5)) //23
  24. console.log(car.yd(true)) //33=23+10
  25. console.log(car.price(1)) //13
  26. console.log(car.yd(true)) //23=13+10

思考题 1(没有闭包产生)

  1. var name = 'the window'
  2. var object = {
  3.   name: 'my Object',
  4.   getName: function () {
  5.     return function () {
  6.       return this.name
  7.     }
  8.   }
  9. }
  10. console.log(object.getName()()) //donghuan
  11. var f = object.getName()
  12. // 类似于
  13. var f = function () {
  14.   return this.name
  15. }
  16. f()(
  17.   /*
  18.         要注意的是this指向谁？
  19.         this在匿名函数里面。
  20.         再执行匿名函数
  21.         匿名函数的this指向的是window
  22.         所以打印的是the window
  23.         */
  24.   function () {
  25.     this
  26.   }
  27. )()

思考题 2(有闭包产生)

  1. var name = 'the window'
  2. var object = {
  3.   name: 'my Object',
  4.   getName: function () {
  5.     var that = this
  6.     return function () {
  7.       return that.name
  8.     }
  9.   }
  10. }
  11. console.log(object.getName()()) //my Object
  12. // 相当于
  13. //this指向调用者。object，
  14. //然后我们用that存储了object
  15. var f = object.getName()
  16. var f = function () {
  17.   return that.name //that指向object，所以打印的是my Object
  18. }
  19. f()

闭包总结

  1. 闭包是什么
    闭包是一个函数，能够被其他作用域访问的变量所在的函数
  2. 闭包的作用
    扩大作用域的范围

递归(必须有 return)

如果一个函数内部可以调用其自身，那这个函数就是递归函数。简单理解：函数内部自己调用自己，这个函数就是递归函数。

递归函数的作用和循环效果一样

递归很容易发生”栈溢出”错误，因为不断的调用自己，调着调着自己就爆了。所以必须退出条件 return

  1. //递归函数：函数内部自己调用司机，这个函数就是递归函数
  2. let num = 1
  4. function fn() {
  5.   console.log('我要打印6句话')
  6.   if (num == 6) {
  7.     return //递归里面必须加退出条件
  8.   }
  9.   num++
  10.   fn()
  11. }
  12. fn()

1. 利用递归求数学题

  • 求1*2*3*...*n阶乘
  1. // 利用递归函数求1 - n的阶乘1 * 2 * 3 * 4...*n
  2. function fn(n) {
  3.   if (n == 1) {
  4.     return 1
  5.   }
  6.   return n * fn(n - 1)
  7. }
  8. // fn(3)
  9. console.log(fn(5))
  10. //详细思路 假如用户输入的是3
  11. // return 3*fn(2)
  12. // return 3 * (2 * fn(1))
  13. // return 3*2*1
  • 求斐波拉契数列
  1. // 我们只需要知道用户输入的n和前面的两项(n-1,n-2)就可以计算出n对应的序列值
  2. function fn(n) {
  3.   if (n == 1 || n == 2) {
  4.     return 1
  5.   }
  6.   return fn(n - 1) + fn(n - 2)
  7. }
  8. console.log(fn(4))

2. 利用递归遍历数据

  1. 我们想要做输入 id 号，就可以返回的数据对象
  1. // 我们想要做输入id号，就可以返回的数据对象
  2. const data = [
  3.   {
  4.     id: 1,
  5.     name: '家电',
  6.     goods: [
  7.       {
  8.         id: 11,
  9.         gname: '冰箱'
  10.       },
  11.       {
  12.         id: 12,
  13.         gname: '洗衣机'
  14.       }
  15.     ]
  16.   },
  17.   {
  18.     id: 2,
  19.     name: '服饰'
  20.   }
  21. ]
  22. // 1. 利用forEach去遍历立main的每一个对象
  23. function getID(json, id) {
  24.   let result = {}
  25.   json.forEach(function (item) {
  26.     if (item.id == id) {
  27.       // console.log(item)
  28.       result = item
  29.     }
  30.     // 2. 里面应该有goods这个数组，并且数组长度不为0
  31.     else if (item.goods && item.goods.length > 0) {
  32.       result = getID(item.goods, id)
  33.     }
  34.   })
  35.   return result
  36. }
  37. console.log(getID(data, 11))
  38. console.log(getID(data, 12))

浅拷贝和深拷贝

  1. 浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用
  2. 深拷贝拷贝多层，每一级别都会拷贝

1 JS高级 - 图4

浅拷贝

  1. var obj = {
  2.   id: 1,
  3.   name: 'andy',
  4.   msg: {
  5.     age: 18
  6.   }
  7. }
  8. var o = {}
  9. //这是浅拷贝。对于msg属性只是拷贝了地址
  10. // 浅拷贝第一种
  11. for (var k in obj) {
  12.   // k是属性名，obj[k]是属性值
  13.   o[k] = obj[k]
  14. }
  15. console.log(o.message == obj.message) //true
  16. console.log(o)
  17. //浅拷贝第二种
  18. console.log('----------------------')
  19. Object.assign(o, obj)
  20. console.log(o)
  21. console.log(o.message == obj.message) //true

深拷贝(数组，对象)

使用递归的方式实现深拷贝

在这里，数组要放在前面，因为数组也属于对象。

  1. // 封装函数
  2. function deepCopy(newObj, oldObj) {
  3.   for (var k in oldObj) {
  4.     //1. 获取我们的属性值是简单的还是复杂的
  5.     var item = oldObj[k]
  6.     //2. 判断这个值是否是数组
  7.     if (item instanceof Array) {
  8.       newObj[k] = []
  9.       deepCopy(newObj[k], item)
  10.       //3. 判断是否是对象
  11.     } else if (item instanceof Object) {
  12.       newObj[k] = {}
  13.       deepCopy(newObj[k], item)
  14.     }
  15.     //4. 如果不是数组也不是对象，就是简单数据类型
  16.     else {
  17.       newObj[k] = item
  18.     }
  19.   }
  20. }
  21. deepCopy(o, obj)
  22. console.log(o)
  23. console.log(o.msg === obj.msg) //false

正则表达式

什么是正则表达式

是用于匹配字符串中的字符组合的模式，在 JS 中，正则表达式也是对象

通常被用来检索，替换那些符合某个模式（规则）的文本，例如验证表单，用户名表单只能输入英文字母，数字或者下划线，昵称输入框中可以输入中文（匹配）。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词（替换），或者从字符串中获取我们想要的特定部分（提取）等。

正则表达式的特点

  1. 灵活性、逻辑性和功能性非常强
  2. 可以迅速以极简单的方式达到字符串的复杂控制
  3. 对于刚接触的人来说，比较晦涩难懂
  4. 实际开发，一般都是直接复制好已经写好的正则表达式，但是要求会使用正则表达式并且根据实际情况修改

正则表达式在 JS 中的使用(待。。。。。)

1. 利用 RegExp 对象来创建正则表达式

  1. var regexp = new RegExp(/123/)
  2. console.log(regexp)

2. 利用字面量创建

  1. var rg = /123/

测试正则表达式 test

test()正则对象方法。用于检测字符串是否符合该规则，该对象会返回 true 或者 false，其参数的需要测试的字符串

  1. 检测123是否符合rg
  2. var rg = /123/
  3. console.log(rg.test(123)) //true符合