• js面向对象的几种设计模式,以及实现继承的几种方式


    js面向对象的几种设计模式

    1.构造函数模式:返回一个新对象

    constructor
    通过new来实现

    function Person(name,age){
        this.name = name;
        this.age = age;
    }
    Person.prototype.sayName = function(){
        return this.name;
    }
    
    var student = new Person("YQY",22);

    2.工厂模式:返回一个新对象

    function createPerson(name){
        var person= {
            name: name,
            sayName:function(){
                console.log(this.name);
            }
        };
        return person;
    }
    //对象调用模式
    createPerson("YQY").sayName() // YQY
    createPerson("xiaoming").sayName()  //xiaoming
    //函数调用模式
    var t = createPerson("YQY").sayName()
    t()   //undefined    
    //原因为createPerson中的sayName方法中的this此时指向window

    3.单例模式

    var People = (function(){
        var instance;
        function init(name){
            return{
                name: name
            };
        }
    
        return{
            createPeople : function(name){
                if(!instance){
                    instance = init(name);
                }
                return instance
            }
        }
    }());
    
    People.createPeople("YQY") //{"name" :"YQY"}
    People.createPeople("xiaoming") //{"name" :"YQY"}

    4.混合模式

    var Person = function(name,age){
        this.name = name;
        this.age = age;
    }
    
    Person.prototype.sayName = function(){
        console.log(this.name);
    }
    
    var Student = function(name,age,score){
        Person.call(this,name,age);
        this.score = score;
    };
    
    //Student.prototype = Object.create(Person.prototype)
    Student.prototype = create(Person.prototype);
    
    function create(parentObj){
        function F(){}
        F.prototype = parentObj;
        return new F();
    };
    
    Student.prototype.sayScore = function(){
        console.log(this.score);
    }
    
    var student = new Student("YQY",22,95);

    5.模块模式:通过闭包来实现一个模块

    var Person = (function(){
        var name = "YQY";
        function sayName(){
            console.log(name);
        }
        return {
            name:name,
            sayName:sayName
        }
    })()
    
    Person //{name:name,sayName:sayName}

    6.订阅发布模式

    var EventCenter = (function(){
        var events = {};
        function on(evt,handler){
            events[evt] = events[evt] || [];
            events[evt].push({
                handler:handler
            });
        }
    
        function fire(evt,args){
            if(!events[evt]){
                return;
            }
            for(var i = 0; i < events[evt].length; i++){
                events[evt][i].handler(args);
            }
        }
    
        function off(name){
            delete events[name]
        }
    
        return{
            on:on,
            off:off,
            fire:fire
        }
    })();

    javascript 面向对象(实现继承的几种方式)

    1、原型链继承

    核心: 将父类的实例作为子类的原型

    缺点:  父类新增原型方法/原型属性,子类都能访问到,父类一变其它的都变了

    复制代码
            function Person (name) {
                this.name = name;
            };
    
            Person.prototype.getName = function () {    //对原型进行扩展
                return this.name;
            };
    
            function Parent (age) {
                this.age = age;
            };
    
            Parent.prototype = new Person('老明');   //这一句是关键 //通过构造器函数创建出一个新对象,把老对象的东西都拿过来。
    
            Parent.prototype.getAge = function () {
                return this.age;
            };
    
    //        Parent.prototype.getName = function () {   //可以重写从父类继承来的方法,会优先调用自己的。
    //            console.log(222);
    //        };
    
            var result = new Parent(22);
            console.log(result.getName());  //老明  //调用了从Person原型中继承来的方法(继承到了当前对象的原型中)  
            console.log(result.getAge());   //22   //调用了从Parent原型中扩展来的方法
    复制代码

    2、构造继承

    复制代码
    基本思想
    借用构造函数的基本思想就是利用call或者apply把父类中通过this指定的属性和方法复制(借用)到子类创建的实例中。
    因为this对象是在运行时基于函数的执行环境绑定的。也就是说,在全局中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象。
    call、apply 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

    所以,这个借用构造函数就是,new对象的时候(new创建的时候,this指向创建的这个实例),创建了一个新的实例对象,
    并且执行Parent里面的代码,而Parent里面用call调用了Person,也就是说把this指向改成了指向新的实例,
    所以就会把Person里面的this相关属性和方法赋值到新的实例上,而不是赋值到Person上面,
    所以所有实例中就拥有了父类定义的这些this的属性和方法。

    因为属性是绑定到this上面的,所以调用的时候才赋到相应的实例中,各个实例的值就不会互相影响了。
    复制代码

    核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)

    缺点: 方法都在构造函数中定义, 只能继承父类的实例属性和方法,不能继承原型属性/方法,无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

    复制代码
          function Person (name) {
                this.name = name;
                this.friends = ['小李','小红'];
                this.getName = function () {
                    return this.name;
                }
            };
    
    //        Person.prototype.geSex = function () {    //对原型进行扩展的方法就无法复用了
    //            console.log("男");
    //        };
    
            function Parent = (age) {
                Person.call(this,'老明');  //这一句是核心关键
                //这样就会在新parent对象上执行Person构造函数中定义的所有对象初始化代码,
                // 结果parent的每个实例都会具有自己的friends属性的副本
                this.age = age;
            };
    
            var result = new Parent(23);
            console.log(result.name);    //老明
            console.log(result.friends);  //["小李", "小红"]
         console.log(result.getName());  //老明
         console.log(result.age);    //23
         console.log(result.getSex());  //这个会报错,调用不到父原型上面扩展的方法
    复制代码

    3、组合继承

    组合继承(所有的实例都能拥有自己的属性,并且可以使用相同的方法,组合继承避免了原型链和借用构造函数的缺陷,结合了两个的优点,是最常用的继承方式)

    核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后再通过将父类实例作为子类原型,实现函数复用

    缺点:调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)

    复制代码
            function Person  (name) {
                 this.name = name;
                 this.friends = ['小李','小红'];
             };
    
             Person.prototype.getName = function () {
                 return this.name;
             };
    
            function Parent (age) {
                Person.call(this,'老明');  //这一步很关键
                this.age = age;
            };
    
            Parent.prototype = new Person('老明');  //这一步也很关键
            var result = new Parent(24);
            console.log(result.name);    //老明
            result.friends.push("小智");  //
            console.log(result.friends);  //['小李','小红','小智']
            console.log(result.getName());  //老明
            console.log(result.age);    //24
    
            var result1 = new Parent(25);   //通过借用构造函数都有自己的属性,通过原型享用公共的方法
            console.log(result1.name);  //老明
            console.log(result1.friends);  //['小李','小红']
    复制代码

    4、寄生组合继承

    核心:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点

    缺点:堪称完美,但实现较为复杂

    复制代码
            function Person(name) {
                this.name = name;
                this.friends = ['小李','小红'];
            }
    
            Person.prototype.getName = function () {
                return this.name;
            };
    
            function Parent(age) {
                Person.call(this,"老明");
                this.age = age;
            }
    
            (function () {
                var Super = function () {};     // 创建一个没有实例方法的类
                Super.prototype = Person.prototype;
                Parent.prototype = new Super();     //将实例作为子类的原型
            })();
    
            var result = new Parent(23);
            console.log(result.name);
            console.log(result.friends);
            console.log(result.getName());
            console.log(result.age);
    复制代码
  • 相关阅读:
    发现CSDN的一个小Bug,CSDN网站管理人员进来看看哈~~
    “凡客好声音”摇滚派对专场 正火热抢票中!
    帧动画
    java WEB Response重定向和缓存控制
    上一篇括号配对让人联想起catalan数,顺便转载一篇归纳的还不错的文章
    字符串循环移位
    应用层协议实现系列(三)——FTPserver之设计与实现
    HDU1575-Tr A(矩阵高速幂)
    音视频即时通讯的分包与重组
    怎样批量重命名照片,可是去掉那个烦人的括号
  • 原文地址:https://www.cnblogs.com/chenhuichao/p/13530695.html
Copyright © 2020-2023  润新知