zoukankan      html  css  js  c++  java
  • [JS设计模式]:构造函数模式(2)

    基本用法

    function Car(model, year, miles) {
        this.model = model;
        this.year = year;
        this.miles = miles;
        this.output= function () {
            return this.model + "走了" + this.miles + "公里";
        };
    }
    
    var tom= new Car("大叔", 2009, 20000);
    var dudu= new Car("Dudu", 2010, 5000);
    
    console.log(tom.output());
    console.log(dudu.output());

    问题是output()在每次创建对象的时候都重新定义了,没有共享。

    可以用如下方式:

    function Car(model, year, miles) {
        this.model = model;
        this.year = year;
        this.miles = miles;
        this.output= formatCar;
    }
    
    function formatCar() {
        return this.model + "走了" + this.miles + "公里";
    }

    更好的方式,使用原型继承output方法:

    function Car(model, year, miles) {
        this.model = model;
        this.year = year;
        this.miles = miles;
    }
    
    /*
    注意:这里我们使用了Object.prototype.方法名,而不是Object.prototype
    主要是用来避免重写定义原型prototype对象
    */
    Car.prototype.output= function () {
        return this.model + "走了" + this.miles + "公里";
    };
    
    var tom = new Car("大叔", 2009, 20000);
    var dudu = new Car("Dudu", 2010, 5000);
    
    console.log(tom.output());
    console.log(dudu.output());

    除了使用new,可以作为函数调用、call方式

    function Car(model, year, miles) {
        this.model = model;
        this.year = year;
        this.miles = miles;
        // 自定义一个output输出内容
        this.output = function () {
            return this.model + "走了" + this.miles + "公里";
        }
    }
    
    //方法1:作为函数调用
    Car("大叔", 2009, 20000);  //添加到window对象上
    console.log(window.output());
    
    //方法2:在另外一个对象的作用域内调用
    var o = new Object();
    Car.call(o, "Dudu", 2010, 5000);
    console.log(o.output()); 

    该代码的方法1有点特殊,如果不适用new直接调用函数的话,this指向的是全局对象window,我们来验证一下:

    //作为函数调用
    var tom = Car("大叔", 2009, 20000);
    console.log(typeof tom); // "undefined"
    console.log(window.output()); // "大叔走了20000公里"

    这时候对象tom是undefined,而window.output()会正确输出结果,而如果使用new关键字则没有这个问题。

    //使用new 关键字
    var tom = new Car("大叔", 2009, 20000);
    console.log(typeof tom); // "object"
    console.log(tom.output()); // "大叔走了20000公里"

    使用instanceof来强制使用new

    function Car(model, year, miles) {
        if (!(this instanceof Car)) {
            return new Car(model, year, miles);
        }
        this.model = model;
        this.year = year;
        this.miles = miles;
        this.output = function () {
            return this.model + "走了" + this.miles + "公里";
        }
    }
    
    var tom = new Car("大叔", 2009, 20000);
    var dudu = Car("Dudu", 2010, 5000);
    
    console.log(typeof tom); // "object"
    console.log(tom.output()); // "大叔走了20000公里"
    console.log(typeof dudu); // "object"
    console.log(dudu.output()); // "Dudu走了5000公里"

    通过判断this的instanceof是不是Car来决定返回new Car还是继续执行代码,如果使用的是new关键字,则(this instanceof Car)为真,会继续执行下面的参数赋值,如果没有用new,(this instanceof Car)就为假,就会重新new一个实例返回。

    参考地址

  • 相关阅读:
    前端向后端发送数据时,有时需要转数据格式,但是有时会得到意外的false数据
    js字符串处理,把img标签包裹在p标签里
    antd 对话框、上传图片、轮播图结合在一起
    JavaScript 交换数组元素位置
    codeforces 803 F. Coprime Subsequences (莫比乌斯反演)
    UVa 12716 GCD XOR (数论+bitmask)
    codeforces 1556D
    codeforces 1556 E. Equilibrium (线段树)
    codeforces 1556F
    UVa 1502 GRE Words (DP+AC自动机+jry线段树)
  • 原文地址:https://www.cnblogs.com/moqiutao/p/9915532.html
Copyright © 2011-2022 走看看