js的面向对象编程思想-面向对象的四种设计模式

面向对象

面向对象是一种编程思想,它是以对象数据类型为导向的一种编程思想;
JS中有句话 万物皆对象
JS c++ PHP java … 面向对象开发 (OOP) object oriented programming

面向对象思想的三种特性

三种特性详细介绍的百度网址 面向对象的三种特性

  • 封装
  • 继承
  • 多态

面向对象的四种设计模式

  • 单例模式
  • 工厂模式
  • 构造函数模式
  • 原型模式
    1. 单例模式
    单例模式 调用自己的属性时的方法
    单例模式 每次都要重新 var 个对象;属于手工模式

    对象名.属性名
    this调用;需要注意 this 的指向问题
    调用其他人的属性 我们只能通过 对象名.属性名
    命名空间 —》 就是咱们定义的这些对象名
    单例 —》单独的实例 – 》就是利用普通的对象作为命名空间; —》 所有的普通对象都属于 Object基类的一个实例;
    ①单例模式
var zfpx = {
        name: 'zfpx',
        set: function () {

        },
        get: function () {

        }
    };

②高级单例模式
于普通的单例模式,没有隐私;谁都能看,谁都能改;有时我们需要保护自己的一些隐私;这时就需要我们的这些高级单例模式

  var person = (function () {
        var name = 'zfpx';
        var fn = function () {
            console.log(name)
        };
        var fn2 = function () {
            console.log(name);
        };
        var fn3 = function () {
            fn2();
        };
        return {
            f: fn
        }
    })();

高级单例模式有个缺点 ----》 会形成一个不销毁的作用域;占用浏览器的内存;
2. 工厂模式
工厂模式 就是一个 普通函数
代码的冗余;
函数可以实现代码的 高内聚和低耦合
单例模式呢有个缺点 ,就是每次都要手动新创造一个对象,当我们需要创造很多个单例时,每次都var 一个新的对象比较麻烦,还会造成一定的代码冗余;这时我们可以利用函数去创造我们需要的单例;
我们把这种模式 成为工厂模式

function factory(name) {
        var obj = {
            name:name,
            set:function () {

            },
            get:function () {

            }
        };
        return obj
    }
    var obj = factory('zfpx');
    var obj2 = factory('zfpx2');
    var obj3 = factory('zfpx3');

3. 构造函数模式
**构造函数模式; 创建一个构造函数;通过 new 去创建 这个构造函数(自定义类)的一个实例
这个实例的proto属性指向 这个构造函数(自定义类) 的 原型对象
这个原型对象上有一个constructor属性 指向 构造函数本身
所有的实例都是一个对象
所有的类 都是一个函数

   function Person3() {
        var name2 = 'zfpx';
        this.name = name2;
        this.age = 9;
        // this.getName = function () {
        //     console.log(12)
        // }
        // return 9;
        // return this;
        // return {}
    }
    Person3.prototype.getName = function () {
        console.log(this.name)
    };
    Person3.prototype.name = 'zhufeng';
    var per = new Person3();
    // var per3 = new Person3();
    var n = Person3();//n
    console.log(per); // {name,age}
    per.getName();
    /*
    * per 是Person3(自定义类) 的一个实例
    * 是实例的话就能调用 所属类原型上的方法和属性
    * */

new 执行函数跟普通函数执行的区别
new 执行 会在函数内部自动创建一个 对象 (this);函数执行完成之后;会把this 默认返回
如果手动修改 return 值; 若return的是个值类型;那么 默认return的 还是 this
若 return 的是个引用数据类型;那么返回的就是 这个引用数据类型

原型模式

利用构造函数
原型: prototype

  • 每一个函数都有一个属性:prototype 这属性指向函数自己的原型对象
  • 每一个对象都有一个 proto 的属性,指向 所属类的 原型对象
  • 每一个默认的原型对象都有一个属性 constructor ;指向所属的函数本身
function Person() {
        this.name = 'zhufeng';
        this.age = 9;
    }

    console.log(Person.prototype.constructor === Person);
    Person.prototype.getName = function () {
        console.log(this.name);
    };
    console.log(Person.prototype.getName());

    // var per1 = new Person();
    var per1 = new Person; // 当构造函数不需要传参数的时候,后边括号可以省略;
    // var per2 = new Person();
    // per1 称为  Person 这个类的一个实例; 同时他也是一个对象;
    console.log(per1.__proto__ === Person.prototype);
    console.log(per1);
    per1.getName();
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。