JS（一）之对象、对象字面量

JS之对象、对象字面量

JS构成

• 一个完整的JavaScript实现应该由以下三个部分构成。
  • ECMAScript 标准
  • DOM 文档对象模型（操作网页）
  • BOM 浏览器对象模型（操作浏览器）
    JS系列的学习，主要围绕这三部分开展。

JS的特点

• 解释性语言
• 类似于C和JAVA的语法结构
• 动态语言
• 基于原型的面向对象

JS的对象

对象的分类

1. 内建对象
   • 由ES标准中定义的对象，在任何ES的实现中都可以实现
   • 比如：Math、String、Number、Boolean、Function、Object……
2. 宿主对象
   • 由JS的运行环境提供的对象，目前来讲主要由浏览器提供的对象
   • 比如BOM DOM
3. 自定义对象
   • 由开发人员自己创建的对象

对象基础

• 对象（object）
  • 是 JavaScript 语言的核心概念，也是最重要的数据类型
  • 对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合

var obj = new Object();	 //创建对象

obj.name = "李四": 	//增添对象属性
console.log( obj )	//输出对象 {name : "李四"}
obj.name ="lisi";	//修改属性数据
delete obj.name;	//删除对象属性 输出为undefined

• 对象属性名
  • 对象的属性名不强制要求遵守标识符的规范
  • 如果使用特殊的属性名，不能采用.的方式操作，需要使用另外一种方式，语法：对象["属性名"] = 属性值，存取都需要按照这种方式。在属性名处可以是变量。
• 对象属性值
  • 可以是任意数据类型，甚至可以是对象
• 判定对象是否含有指定属性 ——in运算符
  语法： “属性名” in 对象

  注意：在ES6中，如果key和value相同，可以只写一个，例子：let a = 10; let json = {a};

• 对象创建

1. 使用工厂方法创建

function createPerson(name,age,gender){
	var obj = new Object();
	obj.name = name;
	obj.age = age;
	obj.gender = gender;
}
var obj1 = createPerson("孙悟空",18,"男");
var obj2 = createPerson("沙和尚", 19,"男");

弊端在于：输出对象本身时无法区分对象的实际含义

2. 构造函数，创建对象。构造函数习惯首字母大写

function Person(name,age,gender){
	this.name = name;
	this.age = age;
	this.gender = gender;
}
function Dog(){}

var per = new Person(); // per 是Person类的实例 ，可以使用 per instanceof Person 检查是否为Person实例
var  dog = new Dog();

console.log(per); //输出Person {name:...}
console.log(dog);//输出Dog{}

构造函数的执行流程：

• 创建对象
• 将新建对象设置为函数中this，在构造函数中可以使用this来引用新建的对象
• 逐行指定函数中的代码.
• 将新建对象作为返回值返回

引用数据类型与基本数据类型

1. 基本数据类型：String Boolean Null Undefined
2. 引用数据类型 ：Object
3. 保存位置区别：
   • JS中的变量都是保存在栈内存中的
   • 基本数据类型的值直接在栈内存中存储
   • 值与值之间都是独立存在的，修改一个变量不会影响其他的变量
   • 对象是保存在堆内存中的，没创建一个对象，就会在堆内存中开辟出一个新的空间，而变量保存的是对象的内存地址（对象的引用），如果俩个对象保存的是同一个对象引用，当一个通过一个变量改变属性的首，另外一个也会受到影响。
   • 对象设置为空，则保存的对象的内存地址变为null，而数据依然存在

垃圾回收机制GC：

• 什么是垃圾：obj对象设置为null，与堆内存中的空间无法联系，同时没有任何变量或属性对它引用，此时我们将无法操作该对象，这个对象就是一个垃圾。
• 造成后果：垃圾过多，占用大量的内存空间，导致程序运行变慢
• 如何清理：
  1. 在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不鞥进行垃圾回收的操作
  2. 我们需要做的只是要将不在使用的对象设置为null

4. ==比较基本数据类型的时候，比较的是俩个数据的值是否相同；
   ==比较对象的时候，比较的是俩的数据的地址是否相同。
5. 对象的属性值可以是任何的数据类型，也可以是个函数

var obj = new Object();
obj.name = "孙悟空";
obj.age = 18;
obj.sayName = function (){
	console.log(obj.name);
};
 function func(){
	console.log(obj.name);
};

//调用方法
obj.sayName();
//调用函数
func();

JSON对象

概念

• JSON 对象是JavaScript 的原生对象，用来处理JSON格式数据，有俩个静态方法
• JSON.parse(string):接收一个JSON字符串并将其转换成一个JavaScript 对象
• JSON.stringify(obj):接受一个JavaScript对象并将其转换为一个JSON字符串。

var json = {a: 12, b: 5}
var str = 'hi,' + JSON.stringify(json)
var url = 'http://www.xx.com/' + encodeURIComponent(JSON.stringify(json))
console.log(str)
console.log(url)

var str = '{"a": 12, "b": 4, "c": "abc"}'
var json = JSON.parse(str)
console.log(json)
hi,{"a":12,"b":5}
http://www.xx.com/%7B%22a%22%3A12%2C%22b%22%3A5%7D
{ a: 12, b: 4, c: 'abc' }

IE7以下兼容

IE7及以下的浏览器不兼容JSON，以下提出解决方式

• JS代码如下

var str = '{"name":"孙悟空"}';

• 解决：
  • 第一种解决方案： eval()这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回
    如果使用eval执行的字符串中含有{}，他会将{}当成是代码块。因此在使用时添加括号

    • eval()这个函数的功能很强大，可以执行一个字符串的js代码，但是在开发中尽量不要使用

      1. 执行性能差
      2. 具有安全隐患

  • 第二种解决方式：有现成的js文件解决json不兼容的问题，直接引入即可

JS的对象字面量

JSON格式

• JavaScript Object Notation的缩写，是一种用于数据交换的文本格式
• JSON 是JS对象 的严格子集
• JSON 的标准写法
• JSON只能用双引号
• 所有的key都必须用双引号包起来

使用JSON对象字面量创建对象

var obj = {};
var obj ={
	name:"lisi",
	age:28
};

1. 对象创建使用构造函数的方式创建
2. 使用对象字面量时，更简便；可以在创建对象时，直接指定对象中的属性。语法：{属性名 ： 属性值, 属性名 : 属性值……}
3. 对象字面量的属性名可以加引号也可以不加，建议不加；特殊名字必须加引号
4. 对象字面量的属性是一个方法的时候，方法可简写如下：

var obj ={
	name:"lisi",
	age:28,
	sayName:function(){
		console.log(obj.name);
	}
};

var obj ={
	name:"lisi",
	age:28,
	sayName(){
		console.log(obj.name);
	}
};

5. 循环对象 for in

for (var n in obj){
console.log(n["age"]);
}

注意

1. JavaScript对象字面量不一定是json
2. JavaScript对象字面量属性不用引号也可以，而且值可以是任何类型，函数，undefined或者是正则都是可以的