JavaScript 面向对象 （1）

以下 JS 为 ECMA-262 第五版

---

什么是面向对象

面向对象是一种和面向过程不同的思维方法。用类作为模版做蛋糕。 但是 JS 没有类，它的对象和其他基于类的语言的对象不同；
Java 的对象： 有三个主要特征，行为·状态·标志。即为有自己的可调用方法，保存着描述当前特征的信息，唯一身份；
Python的对象： 包含特性和方法的合集；
JS 的对象： 无序属性的集合，其属性可以包含基本值、对象或者函数； （ECMA-262）实际上是散列表；

---

既然 JS 的对象与典型面向对象的语言不同，为什么 JS 可以面向对象？

可能需要回答的问题：

• JS 的对象是怎样的？
• 面向对象的需求是什么？
• JS 的对象是否可以符合面向对象的需求？要怎么做才可以符合？
• JS 的【引用类型】和【类】的区别

1. JS 的对象是怎样的？

1. JS 的对象是无序属性的集合，其属性可以包含基本值、对象或者函数； （ECMA-262） 实际上是散列表；
2. JS 的对象是 Object 的实例（即为引用类型的实例）也被称为引用类型的值。每个实例都具有7个属性／方法，它们分别是： constructor, hasOwnProperty(), isPrototypeOf(), propertyIsEnumerable(), toLocaleString(), toString(), valueOf()。
3. JS 的对象有两种属性： 数据属性和访问器属性。数据属性包括 [[Configurable]], [[Enumberable]], [[Writable]], [[Value]]。访问器属性包括一对 getter, setter 函数，有以下4个特性 [[Configurabel]], [[Enumberable]], [[Get]], [[Set]]。这两种属性均使用 Object.defineProperty() 修改。 如下：

 //ECMAScript 5 Object.defineProperty() method (IE9 and Firefox 4).
        var book = {
            _year: 2004,
            name: "javascript",
            edition: 1
        };
        // 修改数据属性
        Object.defineProperty(book, "name" , {
            configurable : false,
            value : "python"
        })

        // 修改访问器属性
        Object.defineProperty(book, "year", {
            get: function(){
                return this._year;
            },
            set: function(newValue){
            
                if (newValue > 2004) {
                    this._year = newValue;
                    this.edition += newValue - 2004;
                
                }
            }
        });
        
        alert(book.name) //python
        delete book.name  //因设置可删除性 configurable 为 false ，所以不可删除
        alert(book.name) //python

        book.year = 2005;
        alert(book.edition);   //2

2. 面向对象的需求是什么？

封装、继承、多态
封装 可以隐藏实现细节，使得代码模块化；
继承 可以扩展已存在的代码模块（类）；它们的目的都是为了——代码重用。
多态 则是为了实现另一个目的——接口重用！
点击查看摘自

3. JS 是否可以符合面向对象的要求？

• JS 是否可以实现封装？
  此问题可以演化为JS是否可以隐藏细节，使得代码模块化？
  已知的模式为以下： 工厂模式 、 构造函数模式 、 原型模式 、ES6的Class
  工厂模式 ：解决了相似对象的问题，却没有解决对象识别的问题，不知道对象的类型。
  构造函数模式 ：

        function Person(name, age, job){
            this.name = name;
            this.age = age;
            this.job = job;
            this.sayName = function(){
                alert(this.name);
            };    
        }
        
        var person1 = new Person("Nicholas", 29, "Software Engineer");
        var person2 = new Person("Greg", 27, "Doctor");
        
        person1.sayName();   //"Nicholas"
        person2.sayName();   //"Greg"
        
        alert(person1 instanceof Object);  //true
        alert(person1 instanceof Person);  //true
        alert(person2 instanceof Object);  //true
        alert(person2 instanceof Person);  //true
        
        alert(person1.constructor == Person);  //true
        alert(person2.constructor == Person);  //true      

      // 相对于 constructor， instanceof 对于对象类型的检测更为可靠

      //每个方法都要在每个实例上重新创建
        alert(person1.sayName == person2.sayName); //false
      //可以把函数定义的方法转移到函数外 如下
        function Person(name, age, job){
            this.name = name;
            this.age = age;
            this.job = job;
            this.sayName = sayName;
        }
        
        function sayName(){
            alert(this.name);
        }

构造函数实际上经历了： 创建对象 ==》 this 指向新对象 ==》 为新对象添加属性 ==》返回新对象
缺点是 - 转移了函数定义的方法，方法放到全局，破坏了封装性。
原型模式 ：

        function Person(){
        }
        
        Person.prototype.name = "Nicholas";
        Person.prototype.age = 29;
        Person.prototype.job = "Software Engineer";
        Person.prototype.sayName = function(){
            alert(this.name);
        };
        
        var person1 = new Person();
        person1.sayName();   //"Nicholas"
        
        var person2 = new Person();
        person2.sayName();   //"Nicholas"
      
        alert(person1.sayName == person2.sayName);  //true
        
        alert(Person.prototype.isPrototypeOf(person1));  //true
        alert(Person.prototype.isPrototypeOf(person2));  //true
        
        //only works if Object.getPrototypeOf() is available
        if (Object.getPrototypeOf){
            alert(Object.getPrototypeOf(person1) == Person.prototype);  //true
            alert(Object.getPrototypeOf(person1).name);  //"Nicholas"
        }

ES6 class 模式 ：

class Point{
  constructor(x,y){
        this.x = x
        this.y = y
    }
    toString(){
        return "(" + this.x + "," + this.y +")"
    }
}

ES6的语法实际上是一个语法糖， 上述模式相当于组合使用函数模式和原型模式：

function Point(x,y){
    this.x = x
    this.y = y
}
Point.prototype.toString = function(){
    return "(" + this.x + "," + this.y +")"
}

动态原型模式 ：只有在方法不存在的情况下才添加方法。

      function Person(name, age, job){
      
          //properties
          this.name = name;
          this.age = age;
          this.job = job;
          
          //methods
          if (typeof this.sayName != "function"){
          
              Person.prototype.sayName = function(){
                  alert(this.name);
              };
              
          }
      }

      var friend = new Person("Nicholas", 29, "Software Engineer");
      friend.sayName();

• JS 如何继承？
  JS 的函数没有签名，所以不支持接口继承，只支持实现继承，是依靠原型链来实现的。
  每个函数都有原型对象 prototype，原型对象的 constructor 属性是一个指向protoype 属性所在函数的指针。读取对象的某个属性时，会一级一级向上搜索，从对象本身开始。如果在实例中找到了具有给定名字的属性，就返回该属性的值，如果没有找到，则继续搜索指针指向的原型对象。

关于几种继承方式，在下一篇