重温JavaScript(lesson8):面向对象(1)

大家好，今天我们继续重温JavaScript，我们今天要开始一个新的专题：面向对象。JS有关对象和类的内容从ES5到ES6还是挺大的变化。ES5实现面向对象编程主要是借助原型，而ES6则是使用class。我们还是从最基础的内容开始吧。

要说对象就得先说说JS有关类型的内容，我们先看看原始类型和引用类型的相关知识。

1.引用类型

在ES6之前，JS没有类的概念，只是存在两种类型：原始类型和引用类型。原始类型保存简单的数据值，引用类型保存对象。象C++或者Java会用栈来存储原始类型，用堆存储引用类型。但是“JS是使用变量对象来最终变量的生命期。原始值直接保存在对象内，引用值则作为一个指针保存在变量内，该指针指向实际对象在内存中的存储位置”

关于原始5种原始类型（boolean、string、number、null、undefined）我们就不说了，我们重点说说引用类型。引用类型是指的对象。对象是属性的无序列表。属性包含键和值。如果一个属性的值是函数，它就被称为方法。在JS中函数其实就是引用值。

我们在使用对象之前，首先要创建对象。JS有多种创建对象或者说实例化对象的方法。一种是使用new操作符和构造函数；另一种是使用字面量。

1.1创建对象的方法

我们首先看看使用new和构造函数的方法：

var object1 = new Object();
var object2 = object1;
console.log(object1 === object2);
//true

这段代码先用new创建了一个对象并将其值保存在object1中，然后将其值赋给object2。这样两个变量都指向同一个对象了。我们看如下代码：

var object1 = new Object();
object1.name = "New_Name";
var object2 = object1;
object2.name = "重温新知";
console.log(object1.name);
// 重温新知
console.log(object2.name);
// 重温新知

这段代码首先将object1的name属性赋予了一个值，然后将其赋值给object2，object2紧接着修改了name属性，则object1的name属性也是修改后的值。

对象创建的另外一种方法就是使用字面量的形式。看代码：

var object1 = {
  name: 'New_Name'
}
var object2 = {}
object2.name = '重温新知'

以上就是有关对象创建的内容，那么如何销毁对象呢？

1.2对象引用的解除

JS有垃圾回收机制，因此使用引用类型时不需要担心内存分配。但是好的习惯是不使用对象的时候将其解除，让垃圾收集器对那块内存进行释放。解除引用的方法是将其设为null值。如下代码：

var object1 = new Object();
object1 = null;

2.对象属性

如上我们看到了定义对象属性的方法，可以在创建对象的时候添加对象属性，也可以为其随时添加属性。当第一次为对象添加属性时，JavaScript在对象上调用一个名为[[Put]]的内部方法。[[Put]]方法会在对象上创建一个新的节点保存属性。调用[[Put]]的结果是在对象上创建了一个自有属性，自有属性有别于原型属性。

当一个已有的属性被赋予一个新值的时候，调用的是一个名为[[Set]]的方法，该方法将属性的当前值替换为新值。

在实际的开发中我们经常遇到和对象属性打交道的场景：看某一个对象是否具有某个属性；枚举对象的属性；删除对象的属性等等。我们下面就来详细学习

2.1属性探测

我们在实际开发中可能会向下面这样写代码：

callbackFun(response){
  var data = response.data;
  if(data.name) {
    //...
  }
}

我们想在data对象拥有name属性的时候，做一些操作。当if判断中的值是一个对象、非空字符串、非零数字或true，判断会为值；而当值是一个nul、undefined、0、false、NaN或空字符串时判断为假。所以上述代码可能会导致错误，因为data.name是一个空字符串时，也被判断是假。

in操作符是在给定对象中查找一个给定名称的属性，如果找到则返回true。in操作符就是在哈希表中查找一个键是否存在。看代码：

var person = {
  name: 'New_Name',
  sayName: function() {
    console.log(this.name);
  }
}
console.log('name' in person)
//true

注意in操作符既会检查对象的自有属性又会检查对象的原型属性。如果你想检查某个属性是不是对象的自有属性则需要使用hasOwnProperty方法。

var person = {
  name: 'New_Name',
  sayName: function() {
    console.log(this.name);
  }
}
console.log('name' in person)
//true
console.log(person.hasOwnProperty("name"))
//true
console.log("toString" in person);
//true
console.log(person.hasOwnProperty("toString"))
//false

如上代码所示，toString是原型对象上的属性，所以person.hasOwnProperty("toString")的结果为false。

2.2属性枚举

所有添加的属性默认都是可以枚举的，也就是说可以使用for-in循环遍历它们。属性的一个内部特征[[Enumerable]]是用于表示属性是可以枚举的，默认为true。for-in循环会枚举一个对象所有的可枚举属性并将属性名赋值给一个变量。看代码：

var person = {
  name: 'New_Name',
  sayName: function() {
    console.log(this.name);
  }
}
for (let  property in person) {
  console.log("property name:"+ property);
  console.log("property value:"+ person[property])
}
//property name:name
//property value:New_Name
//property name:sayName
// property value:function sayName() {
//   console.log(this.name);
// }

在如上代码中，使用for-in循环打印person对象的属性名和属性值。

在ES5中引入了Object.keys()方法，它可以用于获取可枚举属性的名字数组：

var person = {
  name: 'New_Name',
  sayName: function() {
    console.log(this.name);
  }
}
var propertyArray = Object.keys(person);
var len = propertyArray.length;
for(var i=0;i<len;i++) {
  console.log("property name:"+ propertyArray[i]);
  console.log("property value:"+ person[propertyArray[i]]);
}

这段代码的运行结果和上一段代码的运行结果相同。用Object.keys()获取某一对象的可枚举属性，然后使用for循环打印出属性名和属性值。

我们可以将属性添加到对象上，可以枚举出对象的属性，当然也可以删除属性，我们来学习如何删除属性：

2.3删除属性

我们已经知道如何将一个对象的引用解除，就是将对象赋值为null。那我们可不可以将对象属性值设为null来把对象删除呢？事实告诉我们这样是不行的：

var person = {
  name: 'New_Name',
  sayName: function() {
    console.log(this.name);
  }
}
person.name = null;
if(person.hasOwnProperty('name')) {
  console.log("name has not removed");
}
//name has not removed

我们看到将对象属性赋值为null并没有将对象属性删除。我们可以使用delete操作符删除对象属性，看代码：

var person = {
  name: 'New_Name',
  sayName: function() {
    console.log(this.name);
  }
}
delete person.name ;
if(!person.hasOwnProperty('name')) {
  console.log("name has  removed");
}
//name has  removed
console.log("name" in person);
//false
console.log(person.name);
//undefined

使用delete操作符将person对象的name属性删除了。使用hasOwnProperty和使用in操作符判断name属性是否存在于person对象中，结果都为假。访问一个不存在的属性将返回undefined。

好了，以上就是本次我们回顾的关于对象属性的内容，在下一次学习中，我们将继续重温有关对象属性的内容，下次见~

如有错误，请不吝指正。温故而知新，欢迎和我一起重温旧知识，攀登新台阶~