JS 面向对象

在 ECMA 中,将对象定义为无序属性的集合,这些属性可以包含基本值、对象、函数。换句话讲,对象无非就是一堆键值对的集合,键用来定义名称,值用来表述数据

创建对象(基本)

var obj = {};
//或
var obj = new Object();

obj.name = "zhar";
obj.age = 30;
obj.say = function(){
  console.log(this.name);
}
//或(字面量形式)
var obj = {
  name  : "zhar",
  age : 30,
  say : function(){
    console.log(this.name);
  }
}

属性

  1. 访问属性

    • 通过 .语法或 []来访问属性
    • 通过for...in来遍历属性
    console.log(obj.name);//zhar
    console.log(obj["name"]);//zhar
    var key = "age";
    console.log(obj[key]);//30
    for(var k in obj){
      console.log(k , obj[k]);
    }
    

  2. 定义属性

    • 通过.语法或[]来定义属性
    • 通过defineProperty()(ES5)来定义属性
    • 通过 defineProperties()(ES5)来定义多个属性
    • 通过 gettersetter函数来定义访问器属性
    //定义属性
    obj.address = "北京";
    obj["desc"] = "程序员";
    

    defineProperty()定义数据属性

    一个数据属性包含4个描述行为,分别是:

    configurable:是否能够通过 delete 删除属性

    enumerable:是否能够通过 for-in 遍历属性

    writable:是否能够修改属性的值

    value:属性的值,读取时从这个位置读、修改时从这个位置写

    前面的例子中,直接在对象上定义的属性,configurable、enumerable、writable 均为 true,即:可删除、可遍历、可修改,可以通过 defineProperty 方法来定义这几个属性:

    var person = {};
    Object.defineProperty(person,"name",{
      writable : false,//不可修改
      configurable : false,//不可删除
      enumerable : false,//不可遍历
      value : "zhar"
    });
    console.log(person.name);//zhar
    person.name = "newName";
    console.log(person.name);//zhar
    delete person.name;
    

    如果手动调用 defineProperty,那上述的三个属性都会默认为 false

    defineProperties

    使用defineProperties定义多个属性

    var person = {};
    Object.defineProperties(person,{
      name : {
        value : "zhar"
      },
      age : {
        configurable : true,
        value : 30
      },
      //...
    })
    

    其使用方法与单个defineProperty类似,接受两个对象参数,第一个对象为要添加属性的对象,第二个对象为添加的属性。

    getter 与 setter

    访问器属性,包含一对 getter 与 setter 函数,分别用来读取及写入值,包含以下四个特性:

    configurable:是否能够通过 delete 删除属性

    enumerable:是否能够通过 for-in 遍历属性

    get:读取属性时调用的函数,默认 Undefined

    set:写入属性时调用的函数,默认 Undefined

    var person = {
      firstname : "zhar",
      lastname : "zi"
    };
    Object.defineProperty(person,"name",{
      get : function(){
        return this.firstname + "-"+this.lastname
      },
      set : function(nName){
        if(nName.indexOf("best")!=-1){
          this.firstname = nName;
        }
      }
    })
    

    getter 与 setter 并不是必须指定的,只指定 getter意味着属性不可写,只指定 setter 意味着属性不可读

    getOwnPropertyDescriptor

    获取属性描述符

    var person = {
      name : "zhar"
    }
    console.log(Object.getOwnPropertyDescriptor(person,"name"));
    

  3. 删除属性

    • delete

创建对象(进阶)

字面量模式

正如前面所展示的示例一样,即为字面量模式构建对象

//字面量模式创建对象
var person1 = {
  name : "zhar",
  age : 30
}
//var person2 = ...
//var personN = ...

缺点:将出现大量重复冗余的代码

工厂模式

为了解决字面量模式创建对象的重复代码问题,可以将创建过程抽象出来成为一个工厂,即:使用一个函数来创建对象

function createPerson(name,age){
  var obj = {};
  obj.name = name;
  obj.age = age;
  return obj;
}
var person1 = createPerson("zhar",30);
//var person2 = createP...
//var personN = createP...

缺点:虽然工厂模式可以解决字面量创建对象时的重复代码,但并没有解决对象类型识别的问题,即:怎样知道这个对象属于什么类(如:Object Array 这种类型定义)

构造函数模式

对比以下代码:

function Person(name,age){
  this.name = name;
  this.age = age;
  this.say = function(){
    console.log(this.name+"-"+this.age);
  }
}
var person1 = new Person("zhar",30);
person1.say();//zhar-30
var person2 = new Person("tom",19);
person2.say();//tom-19

上面便是一个典型的构造函数,通过观察可以发现,有一些不同的地方:

  • Person 函数并没有返回值,而是将 name、age 等属性赋给了 this 关键字
  • Person 函数的首字母P是大写
  • 在调用该对象时,使用的是 new Person
  • Person 函数没有return关键字

构造函数实际也是一个普通的函数,首字母大写是惯例,用来表明该函数是一个构造函数,用于区分。

person1、person2被称为 Person 的实例

如果不使用 new去调用构造函数会怎样?

function Person(name,age){
  this.name = name;
  this.age = age;
  this.say = function(){
    console.log(this.name+"-"+this.age);
  }
}
Person("zhar",30);
//say函数哪里去了?
window.say();

缺点:每个方法(上例中的 say 方法)会在每一个实例上创建一次(上例中的 person1、person2实例),这样做是没有必要的

可通过 person1.say === person2.say 去判断

原型模式

在 Javascript 中,每一个函数都有一个原型(prototype)属性,该属性指向一个对象,该对象可被所有实例共享,也就意味着,我们可以不必在构造函数中指定属性,而将这些属性或方法都添加到原型中去

function Person(){}
Person.prototype.name = "zhar";
Person.prototype.age = 30;
Person.prototype.say = function(){
  console.log(this.name + "-" +this.age);
}
var person1 = new Person();
person1.say();//zhar-30
var person2 = new Person();
person2.age = 50;
person2.say();//zhar-50

缺点:原型模式固然可以减少函数的重复创建,但问题在于所有实例都共享了同样的属性(上例中的 name、age),这在函数或简单类型的值时没有太大的问题,但在引用数据类型中,则会带来重大的问题。

//省略...
Person.prototype.desc = ["北京","海淀"];
//省略...
person2.desc[1]="昌平";
console.log(person1.desc,person1.age);//[ '北京', '昌平' ] 30
console.log(person2.desc,person2.age);//[ '北京', '昌平' ] 55

正如上例所示,引用数据类型是相互影响的

构造函数与原型模式

结合了上面所有模式的缺点,我们可以使用混合构造函数与原型的模式去构建对象

function  Person(name,age){
  this.name = name;
  this.age = age;
  this.address = ["北京"];
}
Person.prototype.say = function(){
  console.log(this.name+"-"+this.age+"-"+this.address);
}
var person1 = new Person("zhar",30);
person1.address.push("昌平");
var person2 = new Person("tom",15);
person2.address.push("海淀");
person1.say();//zhar-30-北京,昌平
person2.say();//tom-15-北京,海淀

这种模式既支持像构造函数传参,又可以共享对方法的引用,节省内存

这是最为推荐的一种形式

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

推荐阅读更多精彩内容

  • 大家好,我是IT修真院深圳分院第01期学员,一枚正直纯洁善良的web程序员。 今天给大家分享一下,修真院官网JS(...
    老菜菜阅读 1,272评论 0 2
  • 对象。每个对象都有一个内部链接到另一个对象,称为它的原型 prototype。该原型对象有自己的原型,等等,直到达...
    风___________阅读 489评论 0 0
  • title: js面向对象date: 2017年8月17日 18:58:05updated: 2017年8月27日...
    lu900618阅读 564评论 0 2
  • 尽管javascript里有大量内建引用对象,很可能你还说会频繁创建自己的对象。当你在这么做的时候,记得javas...
    WanLum阅读 527评论 1 3
  • npm介绍 1.说明:npm(node package manager)是nodejs的包管理器,用于node插件...
    匿名用户404阅读 475评论 1 1