JS基础----call和apply方法、代理Proxy的使用、JS中defineProperty用法

一 JS中call()和apply()

call()和apply()这两个方法的作用可以简单归纳为改变this指向。
this指向是老生常谈的问题，一般可以狭义的理解为 是谁调用了,this就指向谁

<script>
  let objFlx = {
    name: "flx",
    age: 100,
    getInfo(info) {
      console.log("姓名：", this.name);
      console.log("年龄：", this.age);
      console.log("信息", info);
    }
  }
  let objCxy = {
    name: "cxy",
    age: 100,
    getInfo(info) {
      console.log("姓名：", this.name);
      console.log("年龄：", this.age);
      console.log("信息", args);
    }
  }
  // 正常的调用，结果是正常打印
  objFlx.getInfo('男');
  objCxy.getInfo('女');
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<script>
  // 使用apply() 与 call()方法，改变this指向
  let objFlx = {
    name: "flx",
    age: 100,
    getInfo(info) {
      console.log("姓名：", this.name);
      console.log("年龄：", this.age);
      console.log("信息", info);
    }
  }
  let objCxy = {
    name: "cxy",
    age: 100,
    getInfo(info) {
      console.log("姓名：", this.name);
      console.log("年龄：", this.age);
      console.log("信息", args);
    }
  }
  // 正常的调用，结果是正常打印
  objFlx.getInfo.call(objCxy,"使用了call函数的women");
  // 打印结果为：
  // 姓名: cxy    年龄：100   信息：使用了call函数的women


  objCxy.getInfo.apply(objFlx,['使用了apply函数的men']);
   // 打印结果为：
   // 姓名: flx    年龄：100   信息：使用了apply函数的men
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

二 代理Proxy的使用

Proxy 这个词的原意是代理。Proxy 可以理解成拦截器（即在访问目标对象之前必须先通过这层拦截）。

Proxy常用的方法：
get 方法用于拦截某个属性的读取操作
set 方法用来拦截某个属性的赋值操作

<script>
let flxObj = {
  name: 'flx',
  age: 100,
  hobby: 'study'
}
let trueFlx = new Proxy(flxObj ,{
  get:function (target,key) {
    if (key === 'hobby') {
      // 洗脚还是学习？
      return '洗脚';
    }
    //其他的就直接返回 flxObj 自己的属性
    return target[key];
  },
  set:function (target,key,value) {
    if(key === 'hobby') {
      if (value == '我爱学习') {
         target[key] = '我不信';
      } else {
        target[key] = value;
      }
    }
  }
})

console.log(trueFlx.name)  //  flx
console.log(trueFlx.hobby)  //  洗脚


console.log(trueFlx.hobby = '我爱学习')
console.log(trueFlx) // flx  100  study   我不信
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

三 JS中defineProperty()用法

Object.defineProperty(Object,proName,define)
需要传入三个参数
1,object 你要操作的对象
2, proName 要添加的属性的名字
3, define 定义你添加属性的一些可操作标志 （是否可删除，是否可枚举，是否可赋值等）

<script>
let user={}
Object.defineProperty(user,'name',{
	value:'flx',
	writable:false,  // writable 是否可赋值 默认时false
	enumerable:true,  // enumerable 是否可枚举 默认是false 不可枚举
	configurable:false  // configurable 是否可删除和是否被重新定义 默认是false
})


console.log(user)  // flx

user.name='cxy'
console.log(user.name) // flx  不可修改


let key= Object.keys(user)
console.log(key)// []  不可枚举

delete user.name
console.log(user)  // flx  不可删除
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22