美文网首页
《JavaScript设计模式》笔记(一)

《JavaScript设计模式》笔记(一)

作者: 回调的幸福时光 | 来源:发表于2017-09-11 10:31 被阅读21次

    《JavaScript设计模式》需要读者具有一定的js基础,否则不太容易看得懂,本人学习过程中就有诸多疑问点,也算崎岖坎坷。建议大家可以先行阅读《JavaScript高级程序设计》。

    一、 定义函数的两种方式

    第一章的1.1 和 1.2小节其实是笼统的提出定义函数的两种方式,下面是实例讲解:

    • 函数声明
    // 函数调用
    say();
    // 打印say
    console.log(say);
    // 函数声明
    function say() {
      console.log("Hi");
    }
    

    test-1

    test-1.png
    • 函数表达式
    // 打印say
    console.log(say);
    // 函数表达式
    var say = function () {
      console.log("Hi");
    }
    

    test-2

    test-2.png
    函数提升
    1. 对于函数声明,js解释器不仅提升了函数名,并且提升了函数的定义。即在程序最开始先解析函数定义,再执行其他代码,所以可以在函数声明之前调用。

    test-1编译后的代码示意:

    // 函数声明
    function say() {
      console.log("Hi");
    }
    // 函数调用
    say();
    // 打印say
    console.log(say);
    
    1. 对于函数表达式,js解释器仅仅提升了变量名,当执行到函数体时才会开始解析。

    test-2编译过后代码示意:

    var say = undefined;
    // 打印say
    console.log(say);
    // 函数表达式
    say = function () {
      console.log("Hi");
    }
    

    二、 对象

    1.3 - 1.5小节都是关于如何多样化创建对象,1.6 - 1.7小节是模拟类,1.8小节是链式调用。

    为了减少覆盖或被覆盖的风险,可以使用对象封装变量和函数。

    • 对象字面量
    var Person = {
      say: function () {
        console.log("Hi");
      },
      eat: function () {
        console.log("eat");
      }
    }
    
    • 点语法添加方法

    这里通过点语法添加的是静态方法,对象实例是无法访问的!!!

    var Person =  function () {};
    Person.say = function () {
      console.log("Hi");
    }
    Person.eat = function () {
      console.log("eat");
    }
    

    此时使用console.log()打印Person结果为ƒ () {},因为console.log(Person)实际打印的是Person.toString()。

    Function对象覆盖了从object继承来的Object.prototype.tostring方法,函数的tosting方法会返回一个表示函数源代码的字符串。具体来说,包括 function关键字,形参列表,大括号,以及函数体中的内容。

    建议使用console.dir()打印。

    匿名函数.png
    • 简易工厂
    var  Person = function () {
      return {
        say: function () {
          console.log("Hi");
         },
        eat: function () {
          console.log("eat");
        }
      }
    }
    
    var Person = function () {
      // 公有方法
      this.say = function () {
        console.log("Hi");
      },
      this.eat = function () {
        console.log("eat");
      }
    }
    

    创建对象实例

    var person = new Person();
    
    • 原型
    var Person = function () {};
    // 原型方法
    Person.prototype = {
      say: function () {
        console.log("Hi");
      },
      eat: function () {
        console.log("eat");
      }
    }
    
    • 链式调用

    关键在于返回this

    var Person = function () {};
    Person.prototype = {
      say: function () {
        console.log("Hi");
        return this;
      },
      eat: function () {
        console.log("eat");
        return this;
      }
    }
    

    链式调用

    var person = new Person();
    person.say().eat()
    

    三、 Function

    • 函数式调用

    注意下面this[name] = fn,这句代码相当于添加静态方法,所以即使通过new关键字来创建新对象,对象实例也无法访问类的静态方法。

    Function.prototype.addMethod = function(name, fn) {
      // 这里相当于添加静态方法
      this[name] = fn;
      return this;
    }
    
    // var methods = new Function ();   不建议使用
    var methods = function () {};
    
    // 链式添加
    methods.addMethod('say', function () {
      console.log("Hi");
      return this;
    }).addMethod('eat', function () {
      console.log("eat");
      return this;
    });
    // 链式调用
    methods.say().eat();
    
    • 类式调用
    Function.prototype.addMethod = function(name, fn) {
      // 这里相当于添加原型方法
      this.prototype[name] = fn;
      return this;
    }
    
    var Methods = new Function ();
    
    Methods.addMethod('say', function () {
      console.log("Hi");
      return this;
    }).addMethod('eat', function () {
      console.log("eat");
      return this;
    });
    
    var m = new Methods ();
    m.say().eat();
    

    参考

    segmentfault conlog()是如何打印函数的
    Function.prototype.string()
    js中object转化成string的过程

    相关文章

      网友评论

          本文标题:《JavaScript设计模式》笔记(一)

          本文链接:https://www.haomeiwen.com/subject/esuxsxtx.html