02-01-工厂模式和new运算符

所有详细示例代码都在这里.
  • 选项卡思路:
  // 一个选项卡 -> 按照需求一步一步走
  // 多个选项卡 -> 把共同逻辑提取
  // 扩展: 某一个功能
  //        第一个选项卡有下一页功能
  //        第二个选项卡有轮播功能
  // 所有选项卡共性的地方:封装;
  // 部分选项卡的功能:传参(配置);
  // 独特功能 -> 部分选项卡需要的功能 ? 传配置参数 : 一个选项卡独有功能(返回对象)
  • 工厂模式:
  function Tab() {
    const obj = {};
    obj.name = 'yijiang';
    obj.age = 28;
    obj.psFor = function() {
      console.log('yijiang...');
    };
    return obj  
  }

  const tab1 = Tab();
  const tab2 = Tab();
  // 缺点一:对象识别问题
  console.log(tab1 instanceof Tab);   // false

  // 缺点二:性能问题,每次新建一个对象,都会重复定义 obj
  console.log(tab1.psFor === tab2.psFor); // false
  • new 运算符

    new 运算符:
      1.执行函数;
      2.自动创建一个空对象;
      3.把创建的对象指向另外一个对象;
      4、把空对象和函数里的 this 衔接起来(this 指向实例化对象);
      5.隐式返还 this.
    

    通过 new 将工厂模式 转化为 构造函数

    构造函数
      1、约定俗成:首字符大写
      2、属性放在构造函数、方法放在原型
    

    每个原型上都有一个预定义属性:constructor --> 构造函数

    整体替换构造函数的prototype时一定要记得添加constructor属性

    function Tab() {
      this.name = 'yijiang';
    }
    Tab.prototype = {
      constructor:Tab,
      psFor(){
          console.log("psFor...");
      },
      hobby(){
          console.log("hobby...",this.name);
      }
    }
    let t1 = new Tab();
    console.log(t1.name); // yijiang
    t1.hobby(); // hobby... yijiang
    console.log(t1.constructor === Tab);  // true
    console.log(t1.__proto__ === Tab.prototype);  // true
    
    let t2 = new Tab()
    console.log(t1.hobby === t2.hobby); // true
    
    //仿写new 运算符;
    function myNew(constructor, ...arg){
      let obj = {};
      constructor.call(obj,...arg); // 只能取到属性,不能取到 constructor 中的方法
      obj.__proto__ = constructor.prototype;  // 将构造函数的原型赋值给 obj.__proto__,这样就可以取到构造函数中的方法
      return obj;
    }
    let myN = myNew(Tab);
    console.log(myN.name);  // yijiang
    myN.psFor();  // psFor...