学习前端第三十四天（call，apply，函数绑定；箭头函数；对象属性配置）-EW帮帮网

一、call、apply

function fn(x, y) {

console.log("hello", x, y, this)

};

1.call方法

作用：调用后执行函数，可以给“this”传参数

fn.call({ a: 1 }, 1, 2,);

2.apply方法

第一个给“this”传参数，第二个参数需要是数组形式，然后与形式参数一一对应赋值

fn.apply({ a: 2 }, [9, 3, 4, 5]);

3.区别

call可以传多个参数，apply只能传两个参数，一个对象一个数组

4.借用

利用传对象的特性用call方法对可迭代对象使用数组方法

        const str = "hello";
        let str2 = [].join.call(str, "-");
        console.log(str2); // h-e-l-l-o

二、函数绑定bind

1.复制函数，绑定参数

        'use strict'
        function fn(x, y) {
            console.log("hello", this, x, y)
        }

        const fn2 = fn.bind({ a: 1 })
        const fn3 = fn.bind({ a: 1 }, 1)
        const fn4 = fn.bind({ a: 1 }, 1, 2)

        fn(1, 2);  // 未进行绑定
        fn1(3, 4); // 绑定好了this参数，传入的值会被赋值给x，y
        fn2(5);    // 绑定好了this参数和x的值，传入的值会被赋值给y
        fn3();     // 绑定好了this参数，x的值，y的值

2.复制join方法并绑定方法的this

        const join = [].join.bind("abc");
        console.log(join("-"));  // a-b-c
        console.log(join("，"));  // a，b，c
        console.log(join(";"));   // a;b;c

绑定join处理的字符串，自定义用何种方式连接字符串

三、箭头函数

面试题：

// 箭头函数没有局部变量“this”，this会向上层找

// 箭头函数没有“arguments”(收集实际参数)

// 不能使用new调用

四、对象配置属性

1.属性标志和属性描述符

Object.getOwnPropertyDescriptor 方法允许查询有关属性的完整信息。

Object.getOwnPropertyDescriptors(obj) 方法，一次获取所有属性描述符

writable — 如果为 true，则值可以被修改，否则它是只可读的。
enumerable — 如果为 true，则会被在循环中列出，否则不会被列出。
configurable — 如果为 true，则此属性可以被删除，这些特性也可以被修改，否则不可以。

        const user = {
            username: "jack",
            age: 20,
        };

        // 对对象的一个属性细节修改，给不存在的属性进行修改会新增改属性
        Object.defineProperty(user, "username", {
            value: "ll",
            writable: false,
            configurable: false,
            enumerable: false,
        })
        
        Object.defineProperty(user, "uname", {
            value: "llwe",
            writable: false,
            configurable: false,
            enumerable: false,
        })

        // 可写性；可遍历性；可删除性   
        console.log(Object.getOwnPropertyDescriptor(user, "username")); // 一次获取所有属性描述符

Object.defineProperties(obj, descriptors)，允许一次定义多个属性。

        // 对当前对象进行批量修改，添加
        Object.defineProperties(user, {
            size: {
                value: 20,
                writable: false,
                configurable: true,
                enumerable: false,
            },
            hobby: {
                value: ["css", "html"]
            },
        });

Object.freeze(obj),禁止添加/删除/更改属性。为所有现有的属性设置 configurable: false, writable: false。

2.属性的 getter 和 setter

有两种类型的对象属性。

第一种是 数据属性。

第二种类型的属性。 访问器属性。用于获取和设置值的函数，但从外部代码来看就像常规属性。

get —— 一个没有参数的函数，在读取属性时工作，
set —— 带有一个参数的函数，当属性被设置时调用，

let user = {
  name: "John",
  surname: "Smith",

  get fullName() {
    return `${this.name} ${this.surname}`;
  },

  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  }
};

// set fullName 将以给定值执行
user.fullName = "Alice Cooper";

alert(user.name); // Alice
alert(user.surname); // Cooper

实际应用：

        const user = {
            gender: 2,
            get cnGender() {
                const obj = { 1: "男", 2: "女" };
                return obj[this.gender]
            },
            set cnGender(value) {
                const obj = { 男: 1, 女: 2 }
                this.gender = obj[value];
            }
        }

        console.log(user.cnGender);
        user.cnGender = "男";
        console.log(user.cnGender);

当读取cnGender时，会根据gender的值输出cnGender；

修改cnGender时，会通过函数对应关系修改gender值，然后输出cnGender时，会根据gender修改的值输出cnGender。

学习前端第三十四天（call，apply，函数绑定；箭头函数；对象属性配置）