美文网首页
构造函数模式-基础

构造函数模式-基础

作者: 阿九是只大胖喵 | 来源:发表于2017-02-28 21:58 被阅读0次

    首先看构造函数模式的代码如下:然后会进一步分析。

        function CreateJsPerson(name, age) {
            var obj = {};
            obj.name = name;
            obj.age = age;
            obj.writeJs = function () {
                console.log('my name is ' + this.name + ', age is ' + this.age);
            }
            return obj;
        }
        var p1 = CreateJsPerson('zhangsan', 48);
        p1.writeJs();
        var p2 = CreateJsPerson('lisi', 20);
        p2.writeJs();
    

    构造函数模式的目的就是为了创建一个自定义类,并且创建这个类的实例。
    构造函数模式和工厂函数模式的区别:

    1. 执行的时候
      普通函数执行 -> createJsPerson()
      构造函数模式 -> new CreateJsPerson(),通过new执行后,我们的createJsPerson就是一个类了;而函数执行的返回值(p1)就是CreateJsPerson的一个实例。
      例如,创建一个数组:
        var ary = []; // 字面量方式
        var ary = new Array(); // 实例创建方式 -> 构造函数模式执行的方式
        // 不管哪一种方式,ary都是Array这个类的一个实例
    

    JavaScript中,所有的类都是函数数据类型的,它通过new执行,变成了一个类,但是它本身也是一个普通的函数。
    JavaScript中,所有的实例都是对象数据类型的。

    1. 在函数代码执行的时候
      相同点:都是形成一个私有的作用域,然后经历了 形参赋值 -> 预解释 -> 代码从上到下执行。(类和普通函数一样,它也有普通函数的一面)。
      不同点:在代码执行之前,不用自己再手动的创建obj对象了,浏览器会默认的创建一个对象数据类型值(这个对象其实就是当前类的一个实例);接下来代码从上到下执行,以当前实例为执行的主体,this代表的就是当前的实例,然后分别的把属性名和属性值赋值给当前的实例;最后浏览器默认的把创建的实例返回。

    关于构造函数中的this
    在构造函数模式中,类中(函数体中),出现的this.xxx = xxx; 中的this是当前类的实例。

        function CreateJsPerson(name, age) {
            // 浏览器默认创建的对象就是我们的实例 p1 -> this
            this.name = name;  // -> p1.name = name;
            this.age = age;    // -> p1.age = age;
            this.writeJs = function () {
                console.log('my name is ' + this.name + ', age is ' + this.age);
            }
            // 浏览器把创建的实例默认的返回
        }
        var p1 = new CreateJsPerson('zhangsan', 20);
        p1.writeJs(); // this -> p1, writeJS -> this -> p1
    
        // 这样写不是构造函数模式执行,而是普通的函数执行
        // 由于没有写return,所以res = undefined, 并且CreateJsPerson方法中的this是window
        var res = CreateJsPerson('wangwu', 10); // this -> window
    
        var p2 = new CreateJsPerson('li', 40);
        p2.writeJs(); // this -> p2
    

    p1和p2都是CreateJsPerson这个类的实例,所以都拥有writeJs这个方法,但是不同实例之间的方法是不一样的。
    在类中,给实例增加的属性 (this.xxx = xxx;)属于当前实例的私有的属性,实例和实例之间是单独的个体,所以私有属性之间是不相等的。

    console.log(p1.writeJs === p2.writeJs); // -> false
    

    相关文章

      网友评论

          本文标题:构造函数模式-基础

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