zoukankan      html  css  js  c++  java
  • JavaScript(5)--- 面向对象 + 原型

    面向对象 + 原型

    面向对象这个概念并不陌生,如 C++、Java 都是面向对象语言。面向对象而言都会现有一个类的概念 ,先有类再有对象。类是实例的类型模板。

    比如人类 是一个类 张三 李四 就是一个个对象,他们都是人类创建出的对象 所以都有人类的共同特性,比如 人类都会吃饭 人类都会走路 所以张三李四也会吃饭和走路。

    JavaScript 没有类的概念,是基于原型的面向对象方式。它们的区别在于:

    在基于类的面向对象方式中,对象(object)依靠类(class)来产生。
    在基于原型的面向对象方式中,对象(object)则是依靠构造函数(constructor)和原型(prototype)构造出来的。
    

    面向对象语言的第一个特性毫无疑问是封装,在 JS 中,封装的过程就是把一些 属性方法 放到对象中“包裹”起来。

    一、创建对象三种方式

    1、原始方式创建对象

    1) 字面量的方式

    示例

            var per = {
                name: "张三",
                age: 20,
                sex: "男",
                say: function () {
                    console.log("说话");
                }
            };
    

    2) Object实例添加属性方法

    示例

               var per2=new Object();
               per2.name="李四";
               per2.age=30;
               per2.sex="男";
               per2.say=function () {
                 console.log("说话");
               };
    

    优点:代码简单。

    缺点: 创建多个对象会产生大量的代码,编写麻烦,且并没有实例与原型的概念。

    解决办法:工厂模式。

    2、工厂模式

    概念 工厂模式是非常常见的一种设计模式,它抽象了创建具体对象的过程。JS 中创建一个函数,把创建新对象、添加对象属性、返回对象的过程放到这个函数中,

    用户只需调用函数来生成对象而无需关注对象创建细节。

    示例

        function createObject(name,age) {
          this.name=name;
          this.age=age;
          this.say=function () {
            console.log("说话");
          };
        }
        var per1=createObject("张三",20);
        var per2=createObject("李四",30);
    

    优点:工厂模式解决了对象字面量创建对象代码重复问题,创建相似对象可以使用同一API。

    缺点:因为是调用函创建对象,无法识别对象的类型。

    解决办法:构造函数

    3、构造函数

    JS 中构造函数与其他函数的唯一区别,就在于调用它的方式不同。任何函数,只要通过new 操作符来调用,那它就可以作为构造函数。

    示例

       //自定义构造函数----->实例化对象
        function Person(name,age,sex) {
          this.name=name;
          this.age=age;
          this.sex=sex;
          this.say=function () {
            console.log("说话");
          };
        }
        //构造函数---->创建对象
        var per1=new Person("张三",20,"女");
        var per2=new Person("李四",30,"女");
    

    通过构造函数new一个实例经历了四步:

    1. 创建一个新对象;
    2. 将构造函数内的 this 绑定到新对象上;
    3. 为新对象添加属性和方法;
    4. 返回新对象(JS 引擎会默认添加 return this;)。
    

    而通过构造函数创建的对象都有一个constructor属性,它是一个指向构造函数本身的指针,因此就可以检测对象的类型。

    alert(per1.constructor === Person) //true
    alert(per1 instanceof Person) // true
    

    但是仍然存在问题:

    alert(per1.say == per2.say) //false
    

    同一个构造函数中定义了say(),而不同对象的同名函数却是不相等的,意味着这两个同名函数的内存空间不一致,也就是构造函数中的方法要在每个实例上重新创建一次。

    这显然增加不必要内存空间。

    优点:解决了类似对象创建问题,且可以检测对象类型。

    缺点:构造函数方法要在每个实例上新建一次。

    解决办法:原型模式。


    二、原型模式

    1、概念

    在JS中,创建对象的方式有工厂模式和构造函数模式等; 而构造函数模式最大的问题在于:构造函数中的每个方法都需要在实例对象中重新创建一遍,不能复用

    所以为了解决这一个问题,就需要使用原型模式来创建对象。原型模式是把所有实例共享的方法和属性放在一个叫做 prototype(原型)的属性中 ,在创建一个函数

    时都会有个prototype属性, 这个属性是一个指针,指向一个对象,是通过调用构造函数而创建的那个对象实例的原型对象。

    如果你学习过java,我们可以简单理解原型就好比我们的静态方法,任何对象都可以共享这个静态方法。

    作用 共享数据,节省内存空间。

    2、举例

    使用原型,就意味着我们可以把希望实例共享的属性和方法放到原型对象中去,而不是放在构造函数中,这样每一次通过构造函数new一个实例,原型对象中定义

    的方法都不会重新创建一次。

    示例

    //原型的作用之一:共享数据,节省内存空间
    function Person() {
    }
    //通过构造函数的原型添加属性和方法
    Person.prototype.name = "张三";
    Person.prototype.age = "20";
    Person.prototype.say = function() {
      alert('通过原型创建吃饭方法');
    };
    
    var person1 = new Person();
    var person2 = new Person();
    alert(person1.name); //"张三"
    alert(person2.name); //"张三"
    alert(person1.say == person2.say); //true 通过原型创建的方法就为true
    

    优点:与单纯使用构造函数不一样,原型对象中的方法不会在实例中重新创建一次,节约内存。

    缺点:使用空构造函数,实例 person1 和 person2 的 name都一样了,我们显然不希望所有实例属性方法都一样,它们还是要有自己独有的属性方法。
    并且如果原型中对象中有引用类型值,实例中获得的都是该值的引用,意味着一个实例修改了这个值,其他实例中的值都会相应改变。

    解决办法:构造函数+原型模式组合使用。


    三、构造函数+原型模式

    最后一种方式就是组合使用构造函数和原型模式,构造函数用于定义实例属性,而共享属性和方法定义在原型对象中。这样每个实例都有自己独有的属性,

    同时又有对共享方法的引用,节省内存。

        //原型的作用之一:共享数据,节省内存空间
        //构造函数
        function Person(age,sex) {
          this.age=age;
          this.sex=sex;
        }
        //通过构造函数的原型添加一个方法
        Person.prototype.eat=function () {
          console.log("通过原型创建吃饭方法");
        };
    
        var per1=new Person(20,"男");
        var per2=new Person(20,"女");
        alert(per1.eat == per2.eat); //通过原型创建的方法就为true
    

    这种构造函数与原型模式混成的模式,是目前在 JS 中使用最为广泛的一种创建对象的方法。


    参考

    1、JS面向对象编程之封装 基本上参考这篇写的,因为我认为它写的非常通俗易懂,不需要我再去整理了。非常感谢

    2、js面向对象编程

    3、JavaScript面向对象



    别人骂我胖,我会生气,因为我心里承认了我胖。别人说我矮,我就会觉得好笑,因为我心里知道我不可能矮。这就是我们为什么会对别人的攻击生气。
    攻我盾者,乃我内心之矛(2)。
    
  • 相关阅读:
    js 设计模式
    jquery 概述
    Node.js最新Web技术栈(2015年5月)
    this
    gulp
    bootstrap modal
    jsTree问题
    iterm2 学习笔记
    knowledge_map 修改笔记
    handsontable 问题
  • 原文地址:https://www.cnblogs.com/qdhxhz/p/12181259.html
Copyright © 2011-2022 走看看