JavaScript 对象基础

2019-12-16 本文已影响0人 Yuqian_

内建对象
由ES标准中定义的对象，在任何的ES的实现中都可使用：Math 、String 、Number、 Boolean 、Function。
宿主对象
由JS运行环境提供的对象，目前主要指由浏览器提供的对象，比如BOM、DOM。
自定义对象
由开发人员自己创建的对象。

3、对象的创建

在js中创建对象的方法可分为6种，分别是：基本模式、工厂模式、构造函数模式、原型模式、组合模式、动态原型模式。
①基本模式

var person = new Object();
  person.name = "tutu";
  person.age = 22;
 }

②字面量模式

var person = {
　name:  "tutu",
　age: 22
}

以上基本模式\字面量模式这两种方法在使用同一接口创建多个对象时，会产生大量重复代码，为了解决此问题，工厂模式被开发。
③工厂模式

function person(name, age)  {
  var arr = new Object();
  arr.name = name;
  arr.age = age;
  arr.sayName = function() {
    alert(this.name);
  }
  return arr;
}
var person1 = person("tutu", 22);
var person2 = person("chaoren", 18);

工厂模式解决了重复实例化多个对象的问题，但没有解决对象识别的问题（但是工厂模式却无从识别对象的类型，因为全部都是Object，不像Date、Array等，本例中，得到的都是o对象，对象的类型都是Object，因此出现了构造函数模式）。
④构造函数模式（大写字母开头）

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayName = function() {
    alert(this.name);
  };
}
var person1 = new Person("tutu", 22);
var person2 = new Person("chaoren", 18);

与工厂模式的区别是：

没有显式地创建对象；
直接将属性和方法赋给了 this 对象；
没有 return 语句。

构造函数也有其缺陷，每个实例都包含不同的Function实例（构造函数内的方法在做同一件事，但是实例化后却产生了不同的对象，方法是函数，函数也是对象）详情见构造函数详解，因此产生了原型模式。
⑤ 原型模式
js中规定，每一个构造函数都有一个prototype属性，指向另一个对象，这个对象的所有属性和方法，都会被构造函数的实例继承，可以把那些不变的属性和方法直接定义在prototype对象上。

function person() {
 }
person.prototype.name = "tutu";
person.prototype.age = "22";
person.prototype.sayName = function () { 
  return this.name + "年龄是" + this.age;
}

var person1 = new Person();
console.log(person1.name);

var person2 = new Person();
person2.name = "chaoren";
console.log(person2.name);

原型模式的好处是所有对象实例共享它的属性和方法（即所谓的共有属性），此外还可以设置实例自己的属性（方法）（即所谓的私有属性），可以覆盖原型对象上的同名属性（方法）。

⑥构造函数和原型模式的混合模式

function person(name, age) {
  this.name = name;
  this.age = age;
}

person.prototype = {
  sayName : function() {
    return this.name + "年龄是" + this.age;
  }
} 

var person1 = new Person("tutu", 22);

混合模式是将构造函数模式用于定义实例属性，原型模式用于定义方法和共享的属性。混合模式共享着对相同方法的引用，又保证了每个实例有自己的私有属性。最大限度的节省了内存。
⑦动态原型模式

function person(name, age) {
  this.name = name;
  this.age = age;
  if (typeof this.run != "function") {
    person.prototype = {
      run: function() {
        return this.name + "年龄是" + this.age;
      }
    }
  }
}
var person1 = new person("tutu", "22");

函数中使用if (typeof this.run != "function") 目的是为了防止创建多个对象时，方法执行多次。

4、对象的相关操作

4.1 向对象中添加属性

对象中保存的属性包括属性名和属性值：属性名是字符串，属性值可以是任意的数据类型，甚至也可以是一个对象。向对象中添加属性有两种方法：

语法1：对象.属性名=属性值
语法2：对象["属性名"]=属性值

4.2 读取对象中的属性

读取对象中的属性有两种方法：

语法1：对象.属性名
语法2：对象["属性名"]

ps:如果读取对象中没有的属性，不会报错而是返回undefined；使用语法2中的方法来读取属性时，可在[ ]中直接传递一个变量，这样变量是什么就读取什么属性，比语法1的方法更灵活。

4.3 修改对象中的属性

与向对象中添加属性的两种方法相同：

语法1：对象.属性名=新值
语法2：对象["属性名"]=新值

4.4 删除对象中的属性

删除对象中的属性方法为：

语法：delete 对象.属性名

4.5检查对象中是否包含指定的属性

使用in运算符来检查对象中是否包含指定的属性，如果有则返回true，没有返回false：

语法："属性名" in 对象

这种方法如果对象中没有创建此属性但是原型中有这个属性，结果也返回true。
使用对象的hasOwnProperty()来检查自身是否含有该属性，它只检查自身是否含有该属性，不含原型中的属性。

4.6 枚举对象中的属性

使用for...in语句来枚举对象中的属性。

语法：
for（var 变量 in 对象）{
}

在这个for循环中，对象有几个属性，循环体就执行几次，每次执行时，都会将对象中的一个属性名字赋值给变量。

JavaScript 对象基础

目录

1、对象的定义

2、对象的分类