JS—对象和函数

1.javascript对象

对象（object）是大括号定义的无序的数据集合，由键值对构成，键与值之间用冒号分隔，大括号末尾要使用分号表示对象定义结束。
对象是JavaScript的核心概念，也是最重要的数据类型。JavaScript的所有数据都可以被视为对象。此外，JavaScript 允许自定义对象。
语法：var obj = { key : value };

上面代码定义了一个对象，它被赋值给变量obj。

key是“键名”
注意：
a.键名也被称为属性(property)，对象的所有属性都是字符串，所以加不加引号都可以。
b.如果属性不符合标识符的条件(比如第一个字符为数字，或者含有空格或运算符)，则必须加上引号

value是“键值”
对象的键值可以是任何数据类型

ps:如果对象内部包含多个键值对，每个键值对之间用逗号分隔。最后一个键值对末尾不用加逗号

var obj = {key1:value1,key2:value2};

对象详解：

(1)键名(对象的属性)
(2)键值
(3)对象的创建
(4)对象属性的读写
(5)对象属性的操作
(6)*对象的引用

(1)键名(对象的属性)

键名也被称为属性(property)，对象的所有属性都是字符串，所以加不加引号都可以。
因此上面的代码也可以写成下面这样：

var obj = { 'key': value };

但是，如果属性不符合标识符的条件(比如第一个字符为数字，或者含有空格或运算符)，则必须加上引号。

var obj = {
				'1p': "Hello World",
				'h w': "Hello World",
				'p+q': "Hello World"
			    };

上面对象的三个属性，都不符合标识名的条件，所以必须加上引号。

ps:JavaScript的保留字可以不加引号直接当作对象的属性。

(2)键值

键值是属性所对应的具体的值。javascript的对象的键值可以是任何数据类型。

var obj= {
			name: "Frankenstein Add",
			age: 18,
			sex: "male"
			ability: eat();//eat()表示函数
		 };

ps：如果一个属性的值(ability)为函数，通常把这个属性称为“方法”。它可以像函数那样调用这个属性。

frank.ability();

(3)对象的创建

a直接使用大括号创建对象
b.使用new命令生成一个Object对象的实例
c.使用Object.create方法创建对象

var obj1 = {};
var obj2 = new Object();
var obj3 = Object.create(null);

上面三行语句是等价的，都表示创建了一个没有键值对的空对象。
ps：一般来说，第一种采用大括号的写法比较简洁，也是最常用的一种创建对象的写法。第二种采用构造函数的写法清晰地表示了意图，第三种写法一般用在需要对象继承的场合。

(4)对象属性的读写

a.读取属性
读取对象的属性,有两种方法:一种是使用点运算符,还有一种是使用方括号运算符。

语法：

var obj = { key：value }；
		    console.log(obj.key);
		    console.log(obj['key']);

var frank = { name: 'Frankenstein' };
console.log(frank.name);//Frankenstein
console.log(frank['name']);//Frankenstein

ps:需要注意的是，使用方括号读取对象属性的时候需要加引号！

b.写入属性
点运算符用来为对象的属性写入值。

语法：

var obj = {}；
 obj.key = value;
console.log(obj.key);

var frank = {};
 frank.name = 'frank';
 console.log(frank['name']);//frank

ps：点运算符和中括号运算符都能够给对象的属性赋值,无论属性是否存在(修改属性值)。
那么【中括号】和【点符号】到底有什么区别呢？

中括号运算符总是能代替点运算符。但点运算符却不一定能全部代替中括号运算符。
中括号运算符可以用字符串变量的内容作为属性名。点运算符不能。
中括号运算符可以用纯数字为属性名。点运算符不能。
中括号运算符可以用js的关键字和保留字作为属性名。点运算符不能。

(5)对象属性的操作
javascript为对象提供了一系列内置的方法，方便我们更好的操作对象。

【Object.keys()】获取对象所有属性
【delete】删除一个属性
【in】检查对象是否包含一个属性
【for in】遍历对象所有属性
【with】操作多个对象属性
【Object.keys()】获取对象所有的属性,返回一个属性构成的数组

var greenJuPeople = {	name: '绿巨人',	ability:'发怒变绿' };
console.log(Object.keys(greenJuPeople));//["name", "ability"]

ps：【Object.keys()】是一个整体，调用的时候必须整体使用。

【delete】从对象中删除一个属性

语法：delete obj.property

var obj = { key : 'value' };
		    Object.keys(obj); 	// ["key"]
		    delete obj.key; 		// true
		    obj.key;		 		// undefined
		    Object.keys(obj); 	// []

上面代码表示，一旦使用delete命令删除某个属性，再读取该属性就会返回undefined，而且Object.keys方法返回的该对象的所有属性中，也将不再包括该属性。

ps:如果删除一个不存在的属性，delete不报错，而且返回true。千万引起注意！

  var obj = {};
		    delete obj.key; // true

【in】检查对象是否包含一个属性

语法：'key' in obj

 var obj = { key : 'value' };
		    console.log( 'key' in obj );//true
		    console.log( 'value' in obj);//false

ps:检查的是键名，不是键值。如果包含就返回true，否则返回false。
【for in】遍历对象的所有属性

语法：

var obj = { key1:value1, key2:value2, key3:value3 };
		    for (var pro in obj){
				console.log(obj[pro]);
		    }

ps:循环变量pro表示的是对象的属性名，并不表示属性的值！千万注意！！！！！！

【with】同时操作一个对象的多个属性

语法：

with(obj){
				key1 = value1;
				key2 = value2;
		    }

 var frank = { name : '', age : 0 };
		    with(frank){
				name = 'frank';	
				age = 18;
		    }
		     console.log(frank.name+frank.age);

ps:with只能够修改对象中已经存在的属性，对于对象中原本不存在的属性with无能为力。
pss:with对于ES6以及ES5中的严格模式都已经禁用了，因为with可能会导致代码更难调试和读取。

(6) * 对象的引用
如果不同的变量名指向同一个对象，那么它们都称为这个对象的引用。
也就是说这些变量共同指向同一个内存地址，修改其中一个变量所指向的值，都会影响到其他所有变量所指向的值。

var obj = { fire : 'burn' };
var people1_fire = obj;
var people2_fire = obj;
	
obj.fire = '灭了';
	console.log(people1_fire.fire);//灭了
	console.log(people2_fire.fire);//灭了

2.javascript函数

官方：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
个人：函数是一组拥有某些特定功能的、能够被重复调用的、闭合代码块。(不权威)

上图中【做包子的机器】就可以被看做是一个函数。

有某些特定功能的：能包包子
能够被重复调用的：机器能使用多次
闭合：机器在外面看不到里面有什么

我们在函数外部并不关心函数里面有什么，只关心函数能做什么。(使用机器能够得到包子)
我们在函数内部并不关心函数外部有什么，只关心要怎么做。(包包子的具体步骤)

语法：

function 函数名(函数参数1,函数参数2,..) {
		函数内容语句//函数体
	}

function baoZi(){
			console.log('和面');
			…
				console.log('包子出锅');
				}

上述代码把刚才函数示意图中的机器用代码的方式表示了出来，能够看到每次调用baoZi函数的时候都能够得到一个包纸。
ps:函数参数我们先暂且不考虑，可以不写。

函数知识：
(1)函数的声明
(2)函数的调用
(3)函数的类型
(4)函数的作用域
(5)函数的补充说明

(1)函数的声明

【function命令】
语法：function 函数名(参数1,参数2,…){ 函数体 }
function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。这种方式声明的函数可以通过调用函数名来调用函数。
例子

 function  baozi(){
     console.log('做包子的机器');
     }
     baozi();

【函数表达式】
语法：var 变量 = function(参数1,参数2,…){ 函数体 };
这种声明函数的方式没有函数名，而是用变量来指代函数。调用函数的时候通过访问变量来调用函数。
例子：

  var fun=function(){
         console.log('做包子的机器');
         };
         fun();

【Function构造函数】
语法：var 变量 = new Function();
这种声明函数的方式非常不直观，几乎无人使用。

(2)函数的调用

相较于函数声明的多种多样，函数的调用方式就简单很多。通常情况下只要函数已经被声明，直接写出函数名和函数参数即可调用函数。

function baoZi(){console.log('这是做包子的机器');}	baoZi();//这是做包子的机器

var jiuCaiBox = function(){console.log(‘这是做韭菜盒子的机器’);}	jiuCaiBox();//这是做韭菜盒子的机器

ps：很显然通过调用能够看到，多次重复声明同名的函数会造成的结果就是：
后声明的函数会覆盖先声明的函数。
pss：对于javascript来说，把函数调用写在函数声明之前也是被允许的，因为javascript存在一个隐式的函数提升。

(3)函数的类型

【无参无返回值】类型函数：function eat(){}
【无参有返回值】类型函数：function eat(){return ‘吃的包子’;}
【有参无返回值】类型函数：function eat(‘包子’){}
【有参有返回值】类型函数：function eat(‘包子’){return ‘吃的包子’}

名词解释

返回值：【函数执行结束后】返回到【原本程序中函数所在的位置】,用来替代整个函数的【结果】，被称为函数的返回值。通常使用return关键词来实现。

形式参数：函数在定义的时候写在小括号中的参数被称为形式参数。形式参数只用来在函数内部使用，在函数外部形式参数失效。通常形式参数不用var声明，直接写变量名即可。

实际参数：函数在调用的时候写在小括号中的参数被称为实际参数。

(4)函数的作用域(scope)

作用域（scope）指的是变量存在的范围。Javascript只有两种作用域：
全局作用域：变量在整个程序中一直存在，所有地方都可以读取。
函数作用域：变量只在函数内部存在。在函数外部变量失效。

和作用域与之对应的，javascript中有两种变量：
全局变量(global variable)：在函数外部声明的变量，它可以在函数内部读取。
局部变量(local variable)：在函数内部定义的变量，外部无法读取。

var globle_variable = 1;
	function func_globle(){console.log(globle_variable);} 
	func_globle();//1

function func_local(){var local_variable = 1;}
	console.log(local_variable);//local_variable is not defined

(5)函数的补充说明

a.ECMAScript规定:不能在非函数的代码块中声明函数。

if(a>0){
		function func(){}//wrong way!
	}

b.可以使用name属性来获取函数名(个人觉得暂时没啥用)

function func() {}
	func.name // ‘func'

c.可以使用length属性来获取函数的参数个数

function func(num1, num2) {}
func.length // 2

d.函数中还有一种特殊的函数，叫做自执行函数

(function(){ /* code */ }());

或

 (function(){ /* code */ })();

其特点就是不需要调用就能够自动执行。