对象
- 对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性(与C语言中结构体类似)
分类
内建对象
- 由ES标准中定义的对象,在任何的ES的实现中都可以使用
- 比如:Math,String,Number,Boolean,Function,Object……
宿主对象
- 由JS的运行环境提供的对象,目前来讲主要是浏览器提供的对象
- 比如BOM,DOM
自定义对象
- 由开发人员自己创建的对象
对象的使用
创建对象
1 | var obj = new Object(); |
向对象中添加/修改属性
1 | obj.name = "孙悟空“; |
读取
1 | console.log(obj.gender); |
特殊属性名的存取
这种写法更加灵活
1 | obj["123"] = 789; |
in运算符
检查obj中是否含有test2属性
1
console.log("test2" in obj);
存储
JS中变量都是保存在栈内存中的
- 基本数据类型的值直接在栈内存中存储
对象是保存在堆内存中的,每创建一个新的对象,就会在堆内存中开辟出一个新的空间
而变量保存的是对象的内存地址(对象的引用)
对象字面量
1 | var obj = {}; 等同于 var obj = new Object(); |
更方便地直接添加属性
1
2
3
4var obj2 = {name:"猪八戒",
age:28,
gender:"男"(此处最好不要写",",浏览器会默认删除",")
}更方便地无限套娃
1
2
3
4
5var obj2 = {name:"猪八戒",
age:28,
gender:"男",
test:{name:"沙和尚"}(注意是":",而不是"=")
}
函数
函数也是一个对象
- 函数可以封装一些功能(代码),在需要时可以执行这些功能(代码)
函数的使用
创建一个函数对象(不常用)
1
var fun = new Function("console.log('Hello 这是我的第一个函数');");
函数的调用
1
fun();
使用函数声明来创建一个函数
1
2
3
4
5
6
7function fun2(){
console.log("这是我的第二个函数~~~");
alert("哈哈哈");
document.write("~~~(>_<)~~~");
}
fun2();使用函数表达式来创建一个对象
本质:将匿名函数赋值给变量
1
2
3
4
5var fun3 = function(){
console.log("我是匿名函数中封装的代码");
}
fun3();函数的参数
1
2
3
4
5function sum(a,b){
console.log(a+b);
}
sum(1,2);如果实参的数量少于形参的数量,则没有对应实参的形参将是undefined
返回值
1
2
3
4
5
6function sum(a,b,c){
var d = a + b + c;
return d;(rueturn后的语句不会执行)
}
var result = sum(4,7,8);实参可以是任意数据类型,包括对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19function sayHello(o){
console.log("我是"+o.name+",今年我"+o.age+"岁了,"+"我是一个"+o.gender+"人,"+"我住在"+o.address)
}
var obj = {
name:"孙悟空",
age:18,
gender:"男",
address:"花果山"
};
sayHello(obj);
//sayHello(obj);也可以这样写
function fun(a){
a(obj);
}
fun(sayHello);
//输出结果都是:
// 我是孙悟空,今年我18岁了,我是一个男人,我住在花果山实参可以是一个对象,也可以是一个函数,对象能干的事,实参都能干
1
2
3
4
5
6function fun(a){
console.log("a = "+a);
}
fun(function(){alert("hello")});
//输出结果为:
// a = function(){alert("hello")}- Demo1
1
2
3
4
5
6
7
8function fun(a){
console.log("a = "+a);
}
function sum(a,b,c){
var d = a + b + c;
return d;
}
fun(sum);输出结果为:
Demo2
1
2
3
4
5
6
7
8function fun(a){
console.log("a = "+a);
}
function sum(a,b,c){
var d = a + b + c;
return d;
}
fun(sum(1,2,3));输出结果为:
a = 6 对比
1
2
3
4
5
6sum()
- 调用函数
- 相当于使用函数的返回值
sum
- 函数对象
- 相当于直接使用函数
返回值的类型
Demo1
1
2
3
4
5
6
7
8
9
10
11
12
13function fun(){
alert("函数要执行了~~~");
for(var i = 0 ; i < 5 ; i++){
if(i == 2){
//使用break可以退出当前循环
//continue用于跳出当次循环
//使用return可以结束整个函数
}
console.log(i);
}
alert("函数执行完了~~~");
}
fun();返回值可以是任意的数据类型
也可以是一个对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15function fun2(){
// return 10;
// return "hello";
// return true;
// return null;
}
var a = fun2();
console.log("a = "+a);
function fun3(){
var obj = {name:"沙和尚"};
return obj;
}
var b = fun3();
console.log("b = "+b.name);//b = 沙和尚也可以是一个函数
1
2
3
4
5
6
7
8
9function fun4(){
function fun5(){
alert("我是fun5");
}
//将fun5函数对象作为返回值返回
return fun5;
}
a = fun4;
console.log(a);输出结果为:
上述程序若将
a=fun4;
改为a=fun4();
,console.log(a);
改为a();
或者fun4()();
都将弹出警告框!
立即执行函数
Demo
1
2
3
4
5
6
7
8
9
10//函数对象()
/*
*立即执行函数
*函数定义完,立即被调用,这种函数叫做立即执行函数
*立即执行函数往往只会执行一次
*/
(function(a,b){
console.log("a = "+a);
console.log("b = "+b);
})(123,456);输出结果为:
a = 123 b = 456
方法
函数也可以成为对象的属性
如果一个函数作为一个对象的属性保存,那么我们就称这个函数是这个对象的方法。调用这个函数就说是调用对象的方法
但是它只是名称上的区别,与函数并无差异
一个形象的比喻:函数是公交车🚌,方法是私家车🚗
Demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17var obj = new Object();
//向对象中添加属性
obj.name = "孙悟空";
obj.age = 18;
//对象的属性值可以是任何数据类型,也可以是个函数
obj.sayName = function(){
console.log(obj.name);
};
var obj2 = {
name:"猪八戒",
age:18,
sayName:function(){
console.log(obj2.name)
}
}
obj.sayName();
obj2.sayName();输出结果为:
孙悟空 猪八戒
枚举对象中的属性
使用
for ... in
语句语法:
1
2
3for (var 变量 in 对象) {
}对象中有几个属性,循环体就会执行几次
每次执行时会将对象中的一个属性的名字赋值给变量
1
2
3
4
5
6
7
8
9var obj ={
name:"孙悟空",
age: 18,
gender: "男",
address:"花果山"
};
for (var n in obj) {
console.log(n)
}运行结果:
Demo
1
2
3
4
5
6
7
8
9
10var obj ={
name:"孙悟空",
age: 18,
gender: "男",
address:"花果山"
};
for (var n in obj) {
console.log("属性名:"+n);
console.log("属性值:"+obj[n]);//.n和["n"]只能用于取静态值,取变量要用[n]
}输出结果: