AitSchool

JS高级语法

知识点

  • class 关键字
  • setter/getter
  • apply/bind/call
  • 基础函数式方法

class 关键字

  • 定义关键字
  • 通过new 关键字产生该类的新实例
  • 实例具有独立的 this 私有数据与方法
  • 配套的 extend 与 static 关键字

定义关键字

class Demo {

}

通过new 关键字产生该类的新实例

class Demo {

}
const demo = new Demo();
cosnole.log(demo);

实例具有独立的 this 私有数据与方法

class Demo {
  constructor (x) {
    this.x = x
  }

  getX () {
    return this.x + 1
  }
}
const demo = new Demo(123);
const getx = demo.getX();
console.log(getx);
const demo2 = new Demo(234);
const getx2 = demo2.getX();
console.log(getx2);

通过 class 的构造函数 constructor 接受实例化传进来的参数，并绑定到自身的属性中。定义自身的 getX 方法，获取自身属性操作返回对应的数据。数据是私有的，不同的实例方法调用获取到对应不同的数据。

static 关键字

注意：static 方法并不能在实例对象中被找到，static 方法只能从 class 中直接调用，一般用于纯工具类方法的构建。

class Demo {
  constructor (x) {
    this.x = x
  }

  getX () {
    return this.x + 1
  }

  static log (data){
    console.log(data)
  }
}

Demo.log(123);

extend 关键字

通过 extend 关键继承类，如果想在子类中增加自己参数的数据，可以使用 super 。

class Demo {
  constructor (x) {
    this.x = x
  }

  getX () {
    return this.x + 1
  }
}

class MyDemo extends Demo {
  constructor (x , y) {
    super(x)
    this.y = y
  }
}

const demo = new MyDemo(123,456);
const getx = demo.getX();
console.log(demo,getx);

setter 与 getter

setter、getter 最大的意义在于数据在存取的时机，可以执行自己的逻辑代码。

  • 在 class 定义中使用
  • set 关键字指定 setter
  • get 关键字指定 getter
  • 在存取某实例属性时触发

定义 class

setter 与 getter 在 class 或者 obj 对象中使用。

class Demo {

}

set 关键字指定 setter

在 set 里面传入将要摄入的数据，并且对将要摄入数据的参数进行操作

class Demo {
  set x (x){
    this._x = x + 1
  }
}

get 关键字指定 getter

在 get 里面获取我们所摄入的数据

class Demo {
  set x (x){
    this._x = x + 1
  }

  get x (x){
    return this._x
  }
}

const demo = new Demo();
demo.x = 123;
console.log(demo.x); // 124

思考：为什么使用 set x 的时候 调用的是 this._x 而不是 this.x ?

class Demo {
  set x (x){
    this.x = x + 1
  }
}

注意 ：如果在 set x 中调用 this.x = x + 1，会导致 x 的数值重新发生变化，再次触发 set x 函数，无限循环。

apply / bind / call

JavaScript 原生的设计里面，this 的作用域机制在不同情况的指向是不一样的。可以通过 apply / bind / call 的方法来绑定 this 的作用域。

  • JS 的 this 与作用域
  • this 指向错误的情形
  • 绑定 this 作用域
    • apply
    • bind
    • call
const Demo = {
  x:123,
  get(){
    return this.x
  }
}

const myDemo = {
  x:234,
  get(){
    let demoget = Demo.get();
    console.log(demoget,'demoget'); // 123

    let calldemoget = Demo.get.call(this);
    console.log(calldemoget,'calldemoget'); // 234

    let applydemoget = Demo.get.apply(this); 
    console.log(applydemoget,'applydemoget')

    let binddemo = Demo.get.bind(this);
    let binddemoget = binddemo();
    console.log(binddemoget,'binddemoget'); // 234

    return demoget
  }
}
myDemo.get()
  1. 我们创建一个 Demo 对象，并且赋予他自身的 x 属性，和 get 方法， get 方法返回 this 中的 x 属性。
  2. 我们创建一个 myDemo 对象，并且赋予他自身的 x 属性，和 get 方法， get 方法返回 Demo 对象中的 get 方法返回的值。
  3. 在 myDemo.get 中使用 Demo.get 方法 Demo.get 执行中的 this 实际是 Demo ，所以返回 123。
  4. 在 myDemo.get 中使用 Demo.get.call(this) 修改 Demo.get 中 this 的作用域 为 myDemo，所以返回 234 。
  5. 在 myDemo.get 中使用 Demo.get.apply(this) 修改 Demo.get 中 this 的作用域 为 myDemo，所以返回 234 。
  6. 在 myDemo.get 中使用 Demo.get.bind(this) 绑定 Demo.get 中 this 的作用域 为 myDemo，再调用绑定后的函数 ，所以返回 234 。

apply / bind / call 的用法和参数不一样，但实际作用是一样的，为了改变调用函数的 this 作用域。

基础函数式方法

使用 for 的话，代码会比较冗余。

  • forEach
  • map
  • filter
  • reduce
  • some
  • every
  • 若干实例（跳出 for 循环思维定式！）

forEach

forEach() 对数组中每一项进行运行指定函数，没有返回值。

var tmp = [1,2,3,4].forEach((item,index,arr) => item > 2 ); // undefined

map

map() 对数组中的每一项进行运行指定的函数，返回每一项结果返回的数组。

var tmp = [1,2,3,4].map((item,index,arr) => item + 1 ); // [2,3,4,5]

every

every() 对数组中每一项运行指定的函数，如果该函数对每一项都返回true，则返回true，否则为false。

var tmp = [1,2,3,4].every((item,index,arr) => item > 2 ); //false

some

some() 对数组中每一项运行指定的函数，如果该函数对任意一项有返回true，则返回true，否则为false。

var tmp = [1,2,3,4].some((item,index,arr) => item > 2 ); // true

filter

filter() 对数组中每一项进行运行指定函数，返回该函数会返回true的项组成的数组。

var tmp = [1,2,3,4].filter((item,index,arr) => item > 2 ); // [3,4]

reduce

reduce() 方法会迭代数组的所有项，然后构建一个最终的返回值。方法接受两个参数，一个在每一项调用的函数和作为归并基础的初始值。其中函数接受4个参数（前一个值、当前值、索引、数组对象本身）。函数返回的任何值都会作为第一个参数传递给下一项。第一次迭代发生数组的第二项上。

var tmp = [1,2,3,4].reduce((prev, cur, index, array) => prev + cur ); // 10

← Model模块实现 →