JavaScript 面向对象 (1)

<i>以下 JS 为 ECMA-262 第五版</i>


什么是面向对象

面向对象是一种和面向过程不同的思维方法。用类作为模版做蛋糕。 但是 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. 面向对象的需求是什么?

封装、继承、多态
<b>封装</b> 可以隐藏实现细节,使得代码模块化;
<b>继承</b> 可以扩展已存在的代码模块(类);它们的目的都是为了——代码重用。
<b>多态</b> 则是为了实现另一个目的——接口重用!
点击查看摘自

3. JS 是否可以符合面向对象的要求?
  • JS 是否可以实现封装?
    此问题可以演化为JS是否可以隐藏细节,使得代码模块化?
    已知的模式为以下: 工厂模式 、 构造函数模式 、 原型模式 、ES6的Class
    <b>工厂模式</b> :解决了相似对象的问题,却没有解决对象识别的问题,不知道对象的类型。
    <b>构造函数模式</b> :
        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 指向新对象 ==》 为新对象添加属性 ==》返回新对象
缺点是 - 转移了函数定义的方法,方法放到全局,破坏了封装性。
<b>原型模式</b> :

        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"
        }

<b>ES6 class 模式</b> :

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 +")"
}

<b>动态原型模式</b> :只有在方法不存在的情况下才添加方法。

      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 属性所在函数的指针。读取对象的某个属性时,会一级一级向上搜索,从对象本身开始。如果在实例中找到了具有给定名字的属性,就返回该属性的值,如果没有找到,则继续搜索指针指向的原型对象。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,378评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,356评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,702评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,259评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,263评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,036评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,349评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,979评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,469评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,703评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,257评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2 345

推荐阅读更多精彩内容