再说面向对象（1）

和雍
270 阅读5分钟

这是我参与8月更文挑战的第19天，活动详情查看：8月更文挑战

一、面向对象的概念

相信大家在学习js的初期都听说过一句话：js中万物皆对象；想想初期的我，还真的不是能理解，但是许多的问题如果用对象来解释就很容易理解。包括后面的angular、node.js、express都是对对象有了更为深层次应用，从这个角度阐述，我们可以理解对象究竟有多重要这里不再过多叙述，后面我还会继续分享有关angular、node.js、express的学习心得。

想要面向对象，首先搞清楚，面向对象的概念是怎么提出的。 面向对象是相对于以往的的面向过程变成提出的。面向过程中，为实现一个功能和效果，我们只是顺着业务逻辑写代码，不考虑代码的复用和封装的，如此一来造成页面中的代码非必要的重复，既增加了代码运行的压力，也降低了代码的可维护性。就在这样一个背景下，js中的面向对象应运而生。面向对象并不是js的专利，其他服务端语言都有这样一个概念。不同于后台的语言，由于js中没有类的概念（ES6中已经明确了类的概念，这里不阐述ES6），所以js的面向对象有有着自身十分独特的一面。

二、创建一个对象

前面们已经阐述过面向对象产生的背景及其意义，对象是什么？对象是一个由无序的键值对（key:value）组成的。接下来我们从更深层次认识一下对象，作为一个刚刚淌过这条小河的人来说，这十分有助于我们后面更好的理解面向对象的其他含义。 首先要从创建一个对象说起。创建一个对象有字面量和实例两种创建方式：

2.2 字面量

var person={
    name:"Binary",
    age:24,
    job:"FE",
    say:function(){console.log(this.name)}
 };

2.2 实例创建

var person=new Object();
person.name="Binary";
person.age=24;
person.job="FE";
person.say=function(){console.log(this.name)};

在js中以上两种创建方式是相同的。

第二，属性的类型，也可以说成是属性的属性。在对象中，每一个key不是孤零零的，在其身后也有许许多多的属性在跟随他，而他背后的这些属性规定了，是key的本质属性；key背后的属性又分成了数据属性和访问器属性；

2.3 数据属性

  1. Configurable:表示能否通过 delete 删除该key，能否修改这个 key，默认值是 true；如果将该属性置位false，表示该属性不可以被删除，如果删除，在非严格模式下被忽略，严格模式下将报错。而且这个属性只能修改一次，例如，这次将age的configurable置位false，有一天你想删除它，再次将其置位true，但是同样无法删除，该操作在非严格模式下被忽略，严格模式下将报错。

  2. Enumerable：表示该key是否可以通过for-in循环遍历到，【这个属性重点记忆】，默认值是true

  3. Writable：表示该属性能否修改key对应的value，默认值true；当该属性置位false后，person的age属性为只读，如果修改，在非严格模式下被忽略，严格模式下将报错。

  4. Value：包含这个属性的数据值，读取key值的时候，从这个位置读取，给key赋值的时候保存在这里；

2.4 设置数据属性

设置key的数据属性：Object.defineProperty()方法，该方法需要三个参数：第一个，key所在的对象；第二个：欲修改属性的key；第三个，描述key的对象，这个对象中的属性就是key背后的属性；示例

Object.defineProperty(person,"age",{
    configurable:true,
    enumerable:true,
    writable:false,
    value:24
});

2.5 访问器属性

访问器，又称get、set器，访问器属性是不包含数据值的，get器其实就是getter函数，set器就是setter函数，那么这两个两个方法是干嘛的呢？

当我们读取对象的属性值的时候，会默认调用getter函数，获取key对应的value；当我们设置值的时候，又会调用setter函数，完成设置；访问器同样也有四个属性

  • 1）Configurable:表示能否通过delete删除该key，能否修改这个key，默认值是true；
  • 2）Enumerable：表示该key是否可以通过for-in循环遍历到，默认值是true；
  • 3）Get:读取属性时调用的函数，默认值undefined；
  • 4）Set:设置属性时调用的函数，默认值undefined；

示例：

var person={
    name:"Binary",
    age:24,
    year:1992,
    job:"FE",
    say:function(){console.log(this.name)}
};
Object.defineProperty(person,"age",{
     configurable:true,
     enumerable:true,
     get:function(){
        return this.age
     },
     set:function(newVal){//通过这个方法可以在修改age的同时，让year跟着自动改变。
        if(newVal>this.age){
            this.age=newVal;
            this.year-=newVal+24
        }
     }
 });
person.age=25;
console.log(person.year);//1991;

以上是深层次的了解了一个对象，当然了，一般情况下工作中我们用不到这些高阶的功能，在我的印象中，只在一个node开发时用到一次get、set器，之所以写这些是为了以后更好的理解面向对象。在后面的文章中，定义一个对象的数据属性十分常用，例如enumerable属性，在后面的有关继承、构造函数模式实例识别中都有着重要意义。

avatar
文章
阅读
粉丝