小哥带来的学习

1、写一个方法：不定参数求和

前言：

1、类数组对象： 在javascript中，数组是一个特殊的对象，其property名为正数组，且其length属性会随着数组成员的增减而发生变化，同时又从arry构造函数中继承一些用于进行数组操作的方法，而对于一个普通的对象来说，如果它的所有property名均为正整数，同事也有相应的length属性，那么虽然该对象并不是由Array构造函数所创建的，它依然呈现出数组的行为，在这种情况下，这些对象被称为"类数组对象"
2、Array.from()对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

function Sum() {
    // 1、获取参数个数---arguments（类数组对象）
    // 2、类数组对象转化为数组
    //      [...arguments]
    //      Array.from(arguments)
    // 3、数组求和
    //  return eval(Array.from(arguments).join("+"));
        return [...arguments].reduce((pre,cur) => {
            return pre + cur
        })
} 
console.log(Sum(1,2,3,4));//10

//arguments

image.png

2、创建一个长度为100的数组

• length=100

image.png

• new Array()

image.png

• Array.from()

image.png
注：上面两种拿到的数组，都是empty，没有实际的使用效果； 使用Object.keys()可以拿到数组的index去生成数组

3、手写一个 new

function selfNew(param){
    if(typeof param !== 'function') return '要是一个function';
    
    selfNew.target = param;

    let newObj = Object.create(param.prototype);
    console.log(newObj,'newObjnewObjnewObj');


    let arr = [...arguments].slice(1,arguments.length)
    console.log(arr, 'arr');

    let paramResult =  param.apply(newObj, arr);
    console.log(paramResult,'paramResultparamResultparamResultparamResult');

    var isObject = typeof paramResult === 'object' && paramResult !== null;
    var isFunction = typeof paramResult === 'function';
     if(isObject || isFunction){
        return paramResult;
    }
    return newObj;
}
function newOperator(ctor){
    if(typeof ctor !== 'function'){
      throw 'newOperator function the first param must be a function';
    }
    newOperator.target = ctor;

    var newObj = Object.create(ctor.prototype);

    console.log(newObj,'newObj-newOperator');



    var argsArr = [].slice.call(arguments, 1);
    console.log(argsArr,'argsArr-newOperator');

    // 重置new.target
    newOperator.target = null;

    var ctorReturnResult = ctor.apply(newObj, argsArr);
    console.log(ctorReturnResult,'ctorReturnResult-newOperator');

    var isObject = typeof ctorReturnResult === 'object' && ctorReturnResult !== null;
    var isFunction = typeof ctorReturnResult === 'function';
    if(isObject || isFunction){
        return ctorReturnResult;
    }
    return newObj;
}
function Student(name, age) {
    this.name = name;
    this.age = age;
}
Student.prototype.doSth = function() {
    console.log(`我是${this.name}`);
};

newStudent = new Student('new',18);
myStudent = selfNew(Student, 'selfNew',18);
operatorStudent = newOperator(Student, 'newOperator',18);

console.log(newStudent,newStudent.doSth(),'newStudent');

console.log(myStudent,myStudent.doSth(),'myStudent');

console.log(operatorStudent,operatorStudent.doSth(),'operatorStudent');
//newOperator方法来自于 https://juejin.cn/post/6844903704663949325

对target进行拦截处理，以防构造函数中含有构造函数,target的指向会有问题

 const newOperator = (function () {
      const _newStack = [];
      function newOperator(ctor) {
        // 设定new.target
        newOperator.target = ctor;
        // 生成新的对象，其隐式原型指向构造函数的原型对象
        const obj = Object.create(ctor.prototype);
        // 执行构造函数，并返回结果
        const result = ctor.apply(
          obj,
          Array.prototype.slice.call(arguments, 1)
        );

        // 重置new.target
        newOperator.target = null;
        // 判断最终返回对象
        return (typeof result === "object" && result !== null) ||
          typeof result === "function"
          ? result
          : obj;
      }
      // 设定target的get、set方法
      Reflect.defineProperty(newOperator, "target", {
        get() {
          return _newStack[_newStack.length - 1];
        },
        set(target) {
          if (target == null) {
            _newStack.pop();
          } else {
            _newStack.push(target);
          }
        },
      });
      return newOperator;
    })();
    function B() {
      if (newOperator.target === B) {
        console.log("new调用 B");
      } else {
        console.log("非new调用 B");
      }
      return { balabala: 123 };
    }

    function A() {
      const b = newOperator(B);
      if (newOperator.target === A) {
        console.log("new调用 A");
      } else {
        console.log("非new调用 A");
      }
    }
//此优化为 https://juejin.cn/post/6844903704663949325 网友的评论

4.手写call、apply、bind

• call(参数用逗号隔开，不需要自调用)

Function.prototype.myCall = function(context, ...args) {
    // 此时this指的是当前调用myCall的函数
    if(typeof this !== 'function') return "It's must be a function"

    // 绑定的对象是否存在，不存在 this指向window
    if(!context) context = window;

    // 创建一个唯一的fn作为绑定对象的属性
    const fn = Symbol()

    // 把this指向fn
    context[fn] = this;

    // 用其他的参数，调用fn拿到返回值
    const result = context[fn](...args)
    // 清除对象上的fn属性
    delete context[fn]
    
    return result

}
let ceshi = function(name, age, className) {
    this.name = name,
    this.age = age,
    this.className = className
}
let obj = {
    name: 'xiaohua',
    age: 18
}
let school = {
    className: 2,
    age: 18
}
ceshi.myCall(obj, '小花','2',6);
ceshi.myCall(school, '3', 12,5);
console.log(obj, school);

image.png

• apply(参数为数组，不需要自调用)

Function.prototype.myApply = function (context, args) {
     // 此时this指的是当前调用myCall的函数
     if(typeof this !== 'function') throw "It's must be a function"

     // 绑定的对象是否存在，不存在 this指向window
     if(!context) context = window;
 
     // 创建一个唯一的fn作为绑定对象的属性
     const fn = Symbol()
 
     // 把this指向fn
     context[fn] = this;
    // 参数： 数组 || 类数组
    if (typeof args !== 'object' || !args.length ) throw console.error('参数类型错误');
     // 用其他的参数，调用fn拿到返回值 ---参数为类数组对象Array.from(args)
     const result = context[fn](...Array.from(args))
     // 清除对象上的fn属性
     delete context[fn]
     
     return result
 
}
let ceshi = function(name, age, className) {
    this.name = name,
    this.age = age,
    this.className = className
}
let obj = {
    name: 'xiaohua',
    age: 18
}
let school = {
    className: 2,
    age: 18
}
ceshi.myApply(obj,['xiaohuaya',1,2])
ceshi.myApply(school,['shiwoa',2,3])
console.log(obj,school);

image.png

• bind（参数用逗号隔开，需要自调用）