JS · 对象

对象

对象 属性 原始值 对象属性 对象方法 创建对象 对象访问器 对象构造器 拓展

---

在 JavaScript 中，对象是王。如果您理解了对象，就理解了 JavaScript。

在 JavaScript 中，几乎“所有事物”都是对象。

布尔是对象（如果用 new 关键词定义）
数字是对象（如果用 new 关键词定义）
字符串是对象（如果用 new 关键词定义）
日期永远都是对象
算术永远都是对象
正则表达式永远都是对象
数组永远都是对象
函数永远都是对象
对象永远都是对象
所有 JavaScript 值，除了原始值，都是对象。

面记：属性是怎样被定义的？
属性：是用来描述当前对象的特征的，属性名是当前具备这个特征，属性值是对这个特征的描述(专业语法，属性名称为键[key]，属性值称为值[value]，一组属性名和属性值称为一组键值对),凡是对象必有特征，每一个对象都是有自己的属性。

原始值

原始值：没有属性和方法的值。
原始数据类型：拥有原始值的数据。

javascript 定义了5种基本数据类型（原始数据类型）和引用数据类型。
数据（值）：语言程序编程钟必不可少的生产材料。

 1.	string
 2.	number
 3.	boolean
 4.	null
 5.	undefined

//原始值是一成不变的（它们是硬编码的，因此不能改变）。
//=> x=3.14;  可以改变x的值，但是无法改变3.14的值。

Item	Value	Qty
“Hello”	string	“Hello” 始终是 “Hello”
3.14	number	3.14 始终是 3.14
true	boolean	true 始终是 true
false	boolean	false 始终是 false
null	null	(object) null 始终是 null
undefined	undefined	undefined 始终是 undefined

• 基本数据类型(值类型)
  • 数字number
  • 字符串string
  • 布尔boolean
  • null
  • undefined
• 引用数据类型
  • 对象object
    • 普通对象
    • 数组对象
    • 正则对象
    • 日期对象
    • …
  • 函数function
• ES6中新增加的特殊的类型：Symbol,唯一的值

对象是包含变量的变量

• JavaScript 变量能够包含单个的值

var person = "Bill Gates";

• 对象也是变量。但是对象能够包含很多值。

  • 值按照名称 : 值对的形式编写（名称和值以冒号分隔）。

   var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

对象属性

JavaScript 对象中的命名值，被称为属性。

以名称值对(键值对)书写的对象类似于：

以名称值对书写的对象类似于：

PHP 中的关联数组
Python 中的字典
C 中的哈希表
Java 中的哈希映射
Ruby 和 Perl 中的散列

对象方法

方法是可以在对象上执行的动作。
对象属性可以是原始值、其他对象以及函数。
对象方法是包含函数定义的对象属性。

创建 JavaScript 对象

通过 JavaScript，您能够定义和创建自己的对象。
有不同的方法来创建对象：

• 定义和创建单个对象，使用对象文字。
• 定义和创建单个对象，通过关键词 new。
• 定义对象构造器，然后创建构造类型的对象。

1. 在 ECMAScript 5 中，也可以通过函数 Object.create() 来创建对象。
2. 使用 JavaScript 关键词 new

// 创建对象：
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

//空格和折行不重要。对象定义可横跨多行：
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:62,
    eyeColor:"blue"
};

JavaScript 对象是易变的
对象是易变的：它们通过引用来寻址，而非值。
如果 person 是一个对象，下面的语句不会创建 person 的副本：

var x = person;  // 这不会创建 person 的副本。
//对象 x 并非 person 的副本。它就是 person。x 和 person 是同一个对象。
//对 x 的任何改变都将改变 person，因为 x 和 person 是相同的对象。

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"} 
var x = person;
x.age = 10;// 这将同时改变  x.age 和 person.age

注意： 为何会出现操作对象x，person对象的值也会改变这种情况，大家就要结合对象的运行机制去理解。对象存储的值是在一个堆内存中，对象关联的是堆内存的内存地址，关联同一个堆内存的对象操作的都是同一个堆内存（这么说就很好理解了），可以理解为多对一的关系。

对象属性

javascript对象是无序属性集合。

访问 JavaScript 属性

obj.name     // person.name 得到对象，获取到对象NAME属性名对应的属性值
obj["name"]       // person["name"] ↑同上原理一致
obj[expression]       // x = "age"; person[x] 这里的x我们理解为变量，属性操作最终的还是x存储的值：属性名，若对象中不存在这个属性名，相当于对对象进行新增属性名属性值（键值对）。


示例：
var person = {
  firstname:"Bill",
  lastname:"Gates",
  age:62,
  eyecolor:"blue"
};

//=>以下两种方式都可以
person.firstname + " is " + person.age + " years old.";
person["firstname"] + " is " + person["age"] + " years old.";

表达式必须计算为属性名。

删除属性

delete 关键词从对象中删除属性：

• delete ：彻底删除(真删除)，对象中不再存在此属性

  //delete 关键词会同时删除属性的值和属性本身。
  //删除完成后，属性在被添加回来之前是无法使用的。
  //delete 操作符被设计用于对象属性。它对变量或函数没有影响。
  //delete 操作符不应被用于预定义的 JavaScript 对象属性。这样做会使应用程序崩溃。
  
  var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
  delete person['lastName'];
  //或者
  delete person.lastName;
  

• 属性名对应的属性值置空：假删除：并没有移除这个属性，只是让当前属性的值为空

  var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
  person.firstName= null;
  //或者
  person['firstName'] = null;
  

查询属性及属性值

在对象中存在的属性名，则可以正常获取（即使其属性值为**null）,如果不存在此属性名，则获取到的结果为undefined**

属性名类型特殊情况

• 数字类型：

常见的属性名都是字符串类型的，但属性名也可以为数字格式的

var person = {
	0 : '我的属性名是数字类型的。',
	sex : '我的属性名是字符串格式的'
	...

	//获取属性值
		1.person['0']
		2.person[0]
	person.0 //=>这种情况就会报错：Uncaught SyntaxError: Unexpected number语法错误
}

• 非数字类型/字符串类型

浏览器引擎会将这个值进行转换，转成字符串（toString）,然后进行存储

//属性名是对象类型
obj[{}]; =>先把对象类型的属性名转换成字符串：({}).toString();结果作为属性名进行查询属性值。  
				↓
obj['[object Object]'] = value;

对象方法

JavaScript 方法是能够在对象上执行的动作。
JavaScript 方法是包含函数定义的属性。
方法是存储为对象属性的函数。

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 648,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

拓展：this 关键词

在 JavaScript 中，被称为 this 的事物，指的是拥有该 JavaScript 代码的对象。
this 的值，在函数中使用时，是“拥有”该函数的对象。
请注意 this 并非变量。它是关键词。您无法改变 this 的值。

• 最常见的在java中，想要获取系统属性或者当前作用域的方法就要拿到当前的上下文（Context）,这里不同位置的this代表不同的作用范围。在函数中，则作用区间局限于代表的函数中的元素。

对象方法的执行

[创建对象方法]

methodName : function() { 
	//代码行 
}

[访问对象方法]

objectName.methodName()

通常把 fullName() 描述为 person 对象的方法，把 fullName 描述为属性。
fullName 属性在被通过 () 调用后会以函数形式执行。
所以调用时不加小括号与加小括号是有本质的区别的。

// 创建对象：
var person = {
    firstName: "Bill",
    lastName : "Gates",
    id       : 12345,
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};

//調用：
person.fullName();//=> Bill Gates

对象中添加新方法

向对象添加方法是在构造器函数内部完成的

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id     : 678,
};
person.name = function() {
  return this.firstName + " " + this.lastName;
};

person.name(); //=>Bill Gates


//情况2
person.name = function(fname) {
  return this.firstName + " " + this.lastName + " " + fname;
};

person.name("JULY"); //=>Bill Gates JULY

注意：上述新增函数方法时涉及到了方法的参数，涉及到**形参，实参**范畴了，这个会在以后专门去展开。

person.name(“JULY”); ： 这里的参数叫实参，可以理解为比较明确意义上的参数值
function(fname){}, ： 这里的参数叫形参，可以理解为不确定意义上的参数，所接收的值是用户输入过来的。

对象访问器

ES5(2009)引入了Getter 和 Setter,允许定义对象访问器（被计算的属性）

• 更简洁的语法
• 它允许属性和方法的语法相同
• 它可以确保更好的数据质量
• 有利于后台工作

//1.函数形式访问
var person = {
  firstName: "Bill",
  lastName : "Gates",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// 使用方法来显示来自对象的数据：
person.fullName();


//2.Getter（属性）形式访问:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language.toUpperCase();
  }
};

// 使用 getter 来显示来自对象的数据：
person.lang;


//=>以属性形式访问提供了更简洁的语法。

Object.defineProperty() 方法也可用于添加 Getter 和 Setter：

// 定义对象
var obj = {counter : 0};

// 定义 setters
Object.defineProperty(obj, "reset", {
  get : function () {
	  this.counter = 0;
  }
});
Object.defineProperty(obj, "increment", {
  get : function () {
	  this.counter++;
  }
});
Object.defineProperty(obj, "decrement", {
  get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
  set : function (value) {
	  this.counter += value;
  }
});
Object.defineProperty(obj, "subtract", {
  set : function (value) {
	  this.counter -= value;
  }
});

// 操作计数器：
obj.reset;	//=>0
obj.add = 5;	//=>5
obj.subtract = 1;	//=>4
obj.increment;	//=>5
obj.decrement;//=>4


console.log(counter);//=>4

构造器（构造方法）

构造器形式：

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
    //也可以定义函数（方法）
    this.name = function() {return this.firstName + " " + this.lastName;};
}

//调用构造函数
// 创建 Person 对象
var myFriend = new Person("Bill", "Gates", 62, "blue");
​
// 显示全名
"My friend is " + myFriend.name(); //=>Bill Gates

建议：正如以上所见，JavaScript 提供原始数据类型字符串、数字和布尔的对象版本。但是并无理由创建复杂的对象。原始值快得多！

• 请使用对象字面量 {} 代替 new Object()。
• 请使用字符串字面量 "" 代替 new String()。
• 请使用数值字面量代替 Number()。
• 请使用布尔字面量代替 new Boolean()。
• 请使用数组字面量 [] 代替 new Array()。
• 请使用模式字面量代替 new RexExp()。
• 请使用函数表达式 () {} 代替 new Function()。

var x1 = {};            // 新对象
var x2 = "";            // 新的原始字符串
var x3 = 0;             // 新的原始数值
var x4 = false;         // 新的原始逻辑值
var x5 = [];            // 新的数组对象
var x6 = /()/           // 新的正则表达式对象
var x7 = function(){};  // 新的函数对象

this 关键词
在构造器中我们会看到有**this**关键字，那么this具体代指什么呢？

在 JavaScript 中，被称为 this 的事物是代码的“拥有者”。
this 的值，在对象中使用时，就是对象本身。

• 在构造器函数中，this 是没有值的。它是新对象的替代物。 当一> 个新对象被创建时，this 的值会成为这个新对象。
• 请注意 this 并不是变量。它是关键词。您无法改变 this 的值。

已经创建的对象构造器，无法直接新增属性,需要借助其他方法

手动添加新属性：如需向构造器添加一个新属性，则必须把它添加到构造器函数（可以理解为静态手动创建）

动态添加新属性：
使用 prototype 属性
JavaScript prototype 属性允许对象构造器添加新属性：

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.sex = "man"

已经创建的对象构造器，添加新方法（函数）
JavaScript prototype 属性也可以为对象构造器添加新方法。

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

Person.prototype.name = function() {
  return this.firstName + " " + this.lastName
};

var myFriend = new Person("Bill", "Gates", 62, "blue");
"My friend is " + myFriend.name(); 	//=>My friend is Bill Gates

ES5 新的对象方法

	// 添加或更改对象属性
	Object.defineProperty(object, property, descriptor)
	// 添加或更改多个对象属性
	Object.defineProperties(object, descriptors)
	// 访问属性
	Object.getOwnPropertyDescriptor(object, property)
	// 以数组返回所有属性
	Object.getOwnPropertyNames(object)
	// 以数组返回所有可枚举的属性
	Object.keys(object)
	// 访问原型
	Object.getPrototypeOf(object)
	// 阻止向对象添加属性
	Object.preventExtensions(object)
	// 如果可将属性添加到对象，则返回 true
	Object.isExtensible(object)
	// 防止更改对象属性（而不是值）
	Object.seal(object)
	// 如果对象被密封，则返回 true
	Object.isSealed(object)
	// 防止对对象进行任何更改
	Object.freeze(object)
	// 如果对象被冻结，则返回 true
	Object.isFrozen(object)

拓展

• 字符串对象

通常，字符串被创建为原始值：var firstName = “John”
但是也可以使用 new 关键词创建字符串对象：
var firstName = new > String(“John”)

• 数字对象

通常，数值被创建为原始值：var x = 456
但是也可以使用 new 关键词创建数字对象：
var x = new Number(456)

• 布尔对象

通常，逻辑值被创建为原始值：var x = false
但是也可以使用 new 关键词创建逻辑对象：
var x = new Boolean(false)

转载请注明出处：

作者: maiduoduo
邮箱： maiduoduo0@163.com
博客主页： https://blog.csdn.net/Maiduoudo