Html—JavaScript（二）

JavaScript(二)

1.函数

函数，即⽅法。就是⼀段预先设置的功能代码块，可以反复调⽤，根据输⼊参数的不同，返回不同的值。函数也是对象。

1.1定义

有三种函数定义的⽅式：函数声明语句、函数定义表达式、Function构造函数

函数声明语句

function 函数名（[参数列表]）{
}

function fn(){
	console.log("hahaha");
}
fn();

此种方式声明可以变量提升

//变量提升
fn();
function fn(){
	console.log("hahaha");
}

函数定义表达式

此种方式定义函数可以省略函数名称
var 变量名 = function ([参数列表]) {
 
}

var fun = function(){
 console.log("Hello，boy!");
}
fun();

Function构造函数

Function构造函数接收任意数量的参数，但最后⼀个参数始终都被看成是函数体，⽽前⾯的参数则为新函数的参数。

var add = new Function('x','y','return (x + y)');
// 等同于
function add(x, y) {
 return (x + y);
}
add();

注意：
1.js中的函数没有重载，同名的函数，会被后⾯的函数覆盖。
2.js中允许有不定数⽬的参数

1.2参数

函数运⾏的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数，定义时的参数称为形参，调⽤时的参数称为实参

• 实参可以省略，那么对应形参为undefined
• 若函数形参同名（⼀般不会这么⼲）：在使⽤时以最后⼀个值为准。
• 可以给参数默认值：当参数为特殊值时，可以赋予默认值。
• 参数为值传递，传递副本 ；引⽤传递时传递地址，操作的是同⼀个对象。

// 调⽤函数时，实参可以省略，则对应形参为undefined
function add(a , b) {
 console.log(a + "+" + b + "=" + (a + b));
}
add(1);//1+undefined=NaN
add();//undefined+undefined=NaN

// 若函数形参同名（⼀般不会这么⼲）：在使⽤时以最后⼀个值为准
function add2(a , a) {
 console.log(a);
}
add2(1,2);

// 给参数默认值
function defaultValue(a){
 	a = a || "a";
 	return a; 
}
console.log(defaultValue());
function f(a){
 //若参数a不为undefined或null，则取本身的值，否则给⼀个默认值
 (a !== undefined && a !== null) ? a = a : a = 1;
 return a; 
}
console.log(f());

// 值传递
var num = 12;
function change(n) {
 	n = 30; 
 }
change(num);
console.log(num);//12
// 引⽤传递
var obj = {name: "tom"};
function paramter(o) {
 	o.name = 2; 
}
paramter(obj);
console.log(obj.name);//2

1.3函数调用

1.常用调用方式

函数名([实参]);

2. 调用模式

function add(a,b){
 	return a+b; 
}
var sum = add(1,2)
console.log(sum);//3

3. ⽅法调⽤模式

var o = {
 	m: function(){
 		console.log(1);
 	}
};
o.m();

2.对象的创建

2.1 字⾯量形式创建

var 对象名 = {};//创建⼀个空的对象
var 对象名 = {键:值,键2:值2,...}
var obj = {
 	'name' : 'hello',
 	age : 12,
 	sayHello : function () {
 		console.log("我是对象中的⽅法");
 	},
 	courses : {
 		javase : 4,
 		javascript : 3
 	},
 	isLike : true,
 	members : [
 		{name : "⼩红",age : 20},
 		{name : "⼩绿",age : 22},
 		{name : "⼩蓝",age : 27},
 		{name : "⼩⻩"}
 	]
};

2.2通过new Object创建

var 对象名 = new Object(); // 创建⼀个空的对象

var obj = new Object();
obj.name = 'zs';
obj.age = 18;
console.log(obj);

2.3通过Object对象的create⽅法创建

var 对象名 = Object.create(null);
var obj = Object.create(null);
obj.name = 'ls';
obj.gender = true
console.log(obj);
 
var objn = Object.create(obj);
objn.age = 18;
console.log(objn);
console.log(objn.gender)

3.对象的序列化和反序列化

序列化即将JS对象序列化为字符串，反序列化即将字符串反序列化为JS对象。JS中通过调⽤JSON⽅法，可以将对象序列化成字符串，也可以将字符串反序列化成对象 。

// 序列化对象，将对象转为字符串
JSON.stringify(object);

// 反序列化，将⼀个Json字符串转换为对象。
JSON.parse(jsonStr);

4.this

this是JavaScript语⾔的⼀个关键字。
它代表函数运⾏时，⾃动⽣成的⼀个内部对象，只能在函数内部使⽤。
随着函数使⽤场合的不同，this的值会发⽣变化。但是有⼀个总的原则，那就是this指的是调⽤函数的那个对象。

// 在函数中使⽤this
function test () {
 	this.x = 1;
 	console.log(this.x);
}
test();
console.log(x); // 相当于定义在全局对象上的属性

//在对象中使⽤this
var obj = {
 	name : '张三',
 	age : 20,
 	sayHello : function () {
 		console.log(this.name)
 		console.log(this)
 	} 
}
obj.sayHello();