• 不会JS中的OOP,你也太菜了吧!(第一篇)


    一、你必须知道的

    1) 字面量

    2) 原型

    3) 原型链

    4) 构造函数

    5) 稳妥对象(没有公共属性,而且其方法也不引用this的对象。稳妥对象适合用在安全的环境中和防止数据被其它程序改变的时候)

    二、开始创建对象吧

    <1>: 首先来看两种最基本的创建对象的方法

    1> 使用Object创建对象

    var o = new Object();
    o.sname = 'JChen___1';
    o.showName = function(){
        return this.sname;
    }

    2> 使用对象字面量创建对象

    var o = {
        name: 'JChen___2',
        getName: function(){
            return this.name;
        }
    }

    但是这两个方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码

    <2> 接下来看看几种创建对象的模式吧

    1>工厂模式

    function create(name){
        var o = new Object();
        o.name = name;
        o.sayName = function(){
            return this.name;
        };
        return o;
    }
    var p1 = create('JChen___');

    工厂模式也有一个缺点:就是没有解决对象识别的问题(即怎样知道一个对象的类型)。

    2> 构造函数模式

    function create2(name){
        this.name = name;
        this.sayName = function(){
            return this.name;
        };
        //this.sayName = sayName;
    }
    //function sayName(){ return this.name};
    var p1 = new create2('JChen___4');

    构造函数模式也有一个缺点:就是每个方法都要在每个实例上创建一遍。

    当然我们可以用上面的两行注释掉了代码来屏蔽上面那个缺点。

    但是……,我们又产生了一个新问题——全局变量。如果有很多方法,我们岂不是要定义很多个全局变量函数。这是个可怕的问题。

    3> 原型模式

    1) 普通方法

    function create3(){}
    create3.prototype.name = 'JChen___5';
    create3.prototype.sayName = function(){
        return this.name;
    };
    var p1 = new create3();

    2) 原型字面量方法——我姑且这么称吧

    function create3(){}
    create3.prototype = {
        constructor: create3, //我们要设置它的constructor,如果它很重要
        name: 'JChen___5',
        sayName: function(){
            return this.name;
        }
    };
    var p1 = new create3();

    原型的缺点:

    1): 不能传参

    2): 共享了变量

    4> 构造+原型(模式)

    function create4(name){
        this.name = name;
    }
    create4.prototype.sayName = function(){
        return this.name;
    }
    var p1 = new create4('JChen___6');

    这种模式是目前使用最广泛、认同度最高的一种创建自定义类型的方法。

    5> 动态原型模式

    function create5(name){
        this.name = name;
        if(typeof this.sayName != 'function'){
            create5.prototype.sayName = function(){
                return this.name;
            }
        }
    }
    var p1 = new create5('JChen___7');

    这种方法确实也是十分完美的一种方法。

    6> 寄生构造函数模式

    function create6(name){
        var o = new Object();
        o.name = name;
        o.sayName = function(){
            return this.name;
        }
        return o;
    }
    var p1 = new create6('JChen___8');

    注意那个return o。构造函数在不返回值的情况下,会返回新对象实例。而通过在构造函数的末尾加入return 语句,可以重写调用构造函数时返回的值。

    这个种用法可以用在,假设我们想创建一个具有额外方法的特殊数组。由于不能直接修改Array的构造函数,因此可以使用这个模式。

    function specialArray(){
        var values = new Array();
    
        values.push.apply(values, arguments);
    
        values.join2 = function(){
            return this.join('|');
        };
    
        return values;
    }
    var colors = new specialArray('red', 'blue', 'green');
    colors.join2();//returned: red|blue|green 

    7>稳妥构造函数模式

    稳妥构造函数遵循与寄生构造函数类似的模式,但是有两点不同:

    一是新创建对象的实现方法不引用this

    二是不使用new操作符调用构造函数。

    function create7(name){
        var o = new Object();
        var age = 12;                //私有变量
        o.sayName = function(){      //私有方法
            return name + ' ' + age;
        }
        return o;
    }
    var p1 = create7('JChen___9');

    三、总结

    对象(类)的创建方法大概就这9种了吧。

    创建是没问题了,但是这是第一步,如何实现继承呢?且看下回分解。

  • 相关阅读:
    docker mysql8 phpmyadmin
    linux 压缩与解压缩
    Ubuntu添加开机自动启动程序的方法
    Linux基本命令集合
    linux下使用supervisor启动.net core mvc website的配置
    小修改,让mvc的验证锦上添点花(2)
    小修改,让mvc的验证锦上添点花(1)
    java 基础面试
    redis 面试题
    springMVC 面试题整理
  • 原文地址:https://www.cnblogs.com/JChen666/p/3365337.html
Copyright © 2020-2023  润新知