JS 学习笔记 | 函数与对象

一、函数

1.什么是函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块，它可以拥有某些特定的功能。

2.函数的语法

2.1 使用函数声明

语法：

function 函数名(函数参数1, 函数参数2) {
	代码逻辑
}

例如：

function sayHi() {
	console.log("hi~");
}

注意：定义函数需要使用 function 关键字定义，然后通过指定函数名（函数名遵循命名规范即可）， 函数参数可以有也可以没有。

2.2 使用函数表达式

语法：

var 变量名 = function() {
	代码逻辑
}

例如：

var sayHi = function() {
	console.log("hi~");
}

2.3 使用构造函数

语法：

var 变量 = new Function();

例如：

var sayHi = new Function();

注意：这种方式不是很直观，不推荐使用。

3.调用函数

函数在调用时需只要使用 函数名() 的形式即可，如果有参数的话，可以在括号里传入参数。

例如：

sayHi();	// hi~

注意：

• 如果定义函数的方式是函数声明的话可以将函数调用的代码写在前面，因为 JS 中存在一个隐式的函数提升。
• 如果定义了同名函数，后面的会把前面的覆盖掉。

4.函数的类型

4.1 无参无返回值

function 函数名() {
}

4.2 无参有返回值

function 函数名() {
	return true;
}

4.3 有参无返回值

function 函数名(uname) {
}

4.4 有参有返回值

function 函数名(uname) {
	return uname;
}

名词解释：

• 返回值：【函数执行结束后】 返回到 【原本程序中函数所在的位置】，用来替代整个函数的 【结果】，被称为函数的返回值。通常使用 return 关键字来实现。
• 形式参数：函数在定义时被写在小括号里的参数被称为形式参数，形式参数只用来在函数内部使用，在函数外部形式参数失效，通常形式参数不用 var 声明，直接写变量名即可。
• 实际参数：函数在调用的时候写在小括号中的参数被称为实际参数。

4.5 函数的补充

4.5.1 不能在非函数的代码块中声明函数

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

4.5.2 使用 name 属性获取函数名

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

4.5.3 使用 length 属性获取函数的参数个数

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

4.5.4 自动执行函数

(function() {
	代码逻辑
}());

或者

(function() {
	代码逻辑
})();

注意：该函数不需要调用就能够自动执行。

5.函数的作用域

作用域是指变量存在的范围，在 JS 中一共存在两种作用域：

• 全局作用域：变量在整个程序中一直存在，所有地方都可以读取。
• 函数作用域：变量只在一个函数内部存在，在函数外部失效。

和作用域对应的，JS 中也存在两种变量：

• 全局变量：在函数外部声明的变量，它可以在函数内部读取。
• 局部变量：在函数内部声明的变量，外部无法读取。
  注意：在定义变量时不使用 var，那么该变量就会被定义为全局变量。

二、对象

对象是大括号定义的无序的数据集合，由键值对构成，键和值之间使用冒号隔开，大括号末尾要使用分号，表示对象定义结束。
对象是 JavaScript 的核心概念，也是最重要的数据类型。JavaScript 的所有数据类型都可以被视为对象。此外，JavaScript 允许自定义对象。

1.定义对象

1.1 使用大括号

语法：

var obj = {
	key: value
};

上面的代码定义了对象 obj，对象中有一个属性，如果需要定义多个属性需要在 value 后面添加逗号，最后一个属性不需要添加。

1.2 使用 new 关键字

语法：

var obj = new Object();
obj.key = value;

1.3 使用 create 方法

语法：

var obj = Object.create(null);

总结：一般来说，第一种采用大括号的写法比较简洁，也是最常用的一种创建对象的写法，第二种采用构造函数的写法清晰的表示了意图，第三种写法一般用在需要对对象继承的场景。

2.对象的读写

2.1 读取属性

读取对象的属性，有两种方法：一种是使用点 . 运算符，还有一种是使用方括号 [] 运算符。
语法：

var obj = {key: value};
console.log(obj.key);
console.log(obj[value]);

例如：

var swagger = {name: "swagger"};
console.log(swagger.name);  // swagger
console.log(swagger["name"]);  // swagger

注意：使用方括号读取属性时必须加引号。

2.2 写入属性

var student = new Object();
student.uname = "tom";
student.age = 21;
student.gender = "男";
student.study = function() {
    console.log("学习");
}

2.3 中括号和 点 符号的区别

中括号总能替代 点 符号，但是 点 符号不一定能全部替代中括号。

• 中括号可以用字符串变量的内容作为属性名，点符号不能。
• 中括号可以用纯数字为属性名，点符号不能。
• 中括号可以用 JS 关键字和保留字当作属性名，点符号不能。

3.对象属性的操作

JavaScript 为对象提供了一系列内置的方法，方便我们更好的操作对象。

• Object.keys()：获取对象的所有属性，并以数组的形式进行返回。
  语法：

  var obj = {
  	uname: "swagger",
  	age: 21
  };
  
  console.log(Object.keys(obj));  // ["uname", "age"]
  

• delete：删除一个属性

  var obj = {
  	uname: "swagger",
  	age: 21
  };
  
  console.log(delete obj.uname);  // true
  console.log(obj);   // {age: 21}
  

  使用 delete 删除一个属性后，再去读取该属性就会返回 undefined，而且 Object.keys 方法返回的该对象的所有属性中，也将不再包含该属性。
  注意：无论删除的属性存不存在都会返回 true，并且不会报错。
• in：检查对象是否包含一个属性

  var obj = {
  	uname: "swagger",
  	age: 21
  };
  
  console.log("uname" in obj);    // true
  console.log("gender" in obj);   // false
  

  注意：检查的是键名，不是值名，如果存在返回 true，否则返回 false。
• for-in：遍历对象所有属性

  var obj = {
  	uname: "swagger",
  	age: 21
  };
  
  for (var prop in obj) {
  	console.log(obj[prop]);	// swagger 21
  }
  

  注意：循环变量 prop 表示的是对象的属性名，并不表示属性的值。
• with：操作多个对象属性

  var obj = {
  	uname: "swagger",
  	age: 21
  };
  
  with (obj) {
     uname = "tom",
     age = 22,
     gender = "男"   // 无效
  }
  
  console.log(obj);   // {uname: "tom", age: 22}
  

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

4.对象的引用

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

代码演示：

var obj = {fire: "burn"};
var prop1 = obj;
var prop2 = obj;

console.log(prop1); // {fire: "burn"}
console.log(prop2); // {fire: "burn"}

// 修改其中一个引用的值
prop1.fire = "extinguish"
console.log(obj);   // {fire: "extinguish"}
console.log(prop1); // {fire: "extinguish"}
console.log(prop2); // {fire: "extinguish"}