JavaScript入门到精通（五）

什么，听说你还没有对象，没关系，学好了对象，咱创建一个呀！

 

41. 对象的简介

JS基本数据类型：String，Number，Boolean，Null，Undifined表示的值和值之间没有任何的联系的

如果在JS中表示一个人的信息（name， gender， age），需要定义三个变量，而它们之间是相互独立的，不能成为一个整体

因此引入对象数据类型，来保存多个不同数据类型的属性，使之成为整体

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

 

42. 对象的基本操作

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

使用new关键字调用的函数，是构造函数constructor
构造函数是专门用来创建对象的函数
使用typeof检查一个对象时，会返回object

下面实现对象的增删改查操作：

向对象添加属性
语法：对象.属性名 = 属性值

删除对象的数学值
语法：delete 对象.属性名

修改对象的属性值
语法：对象.属性名 = 属性值

读取对象中的属性
语法：对象.属性名
如果读取对象中不存在的属性，则不会报错而是返回undifined

var obj = new Object();

obj.name = "孙悟空";
obj.gender = "男";
obj.age = 18;

console.log(obj); //打印对象
console.log(obj.name);//查询对象name的属性值
console.log(obj.school);//查询对象中不存在属性

obj.name = "JERRY";//修改对象name的属性值
delete obj.name;//删除对象的name属性
console.log(obj);

 

43. 对象的属性名和属性值

对象的属性名不强制要求遵循标识符的规则，什么名字都可以取，但建议遵循规范

如果采取特殊的属性名，不能采用对象.属性名的方式，应使用对象[“属性名”]=属性值的方式。向中括号内传递一个变量，这种形式操作属性更加灵活

对象的属性值可以是任意的数据类型

可以通过in运算符来检查一个对象中是否含有指定的属性，如果有返回true，没有返回false

语法：”属性名” in 对象

var obj = new Object();

obj.var = "孙悟空";//对象属性名不遵循规则不报错

obj["123"] = 789;//特殊属性名应采取[]方式
console.log(obj);

var n = "123";//定义一个变量灵活操作属性
console.log(obj[n]);

obj.test = "hello";//属性值为String类型
obj.test1 = null;//属性值为null类型
obj.test2 = undefined;//属性值为undifined类型

var obj2 = new Object();
obj2.name = "猪八戒";
obj2.age = 20;
console.log(obj);

console.log("test3" in obj); //检查对象中是否含有某属性
console.log("test2" in obj);

 

44. 基本和引用数据类型

• JS中变量是保存在栈内存中的，基本数据类型的值直接在栈内存中存储，值与值之间是独立存在的，修改一个变量的值不会影响其它变量的值
• JS中对象是保存在堆内存中的，每创建一个对象，开辟出一个新空间，而变量保存的是对象的内存地址（对象的引用）

如果两个变量保存的是同一对象的引用，当改变一个对象的属性另一个也会受到影响

当比较两个基本数据类型时，就是比较值
当比较两个对象类型时，就是比较内存地址

var a = 123;
var b = a;
a++;
console.log("a="+a);//变量a增加了1
console.log("b="+b);//变量b的值不变

var obj1 = new Object();
obj1.name = "孙悟空";
var obj2 = new Object();
obj2 = obj1;
console.log(obj1);//对象obj1的name为孙悟空
console.log(obj2);//对象obj2的name为孙悟空
obj1.name = "猪八戒"; 
console.log(obj1);//修改obj1的name为猪八戒
console.log(obj2);//对象obj2的name改变为猪八戒

obj2 = null;//改变obj2为null
console.log(obj1);//obj1不变
console.log(obj2);//obj2为null

var obj3 = new Object();
var obj4 = new Object();
obj3.name = "TOM";
obj4.name = "TOM";
console.log(obj3==obj4)//两对象地址不同则不相等

 

45. 对象字面量

使用对象字面量来创建一个对象，var obj = { }；

使用字面量可以在创建对象时，直接指定对象中的属性

语法：{属性名：属性值，属性名：属性值…}

对象字面量的属性名可以加引号也可以不加，建议不加
如果要使用一些特殊的名字，则必须加引号

属性名和属性值是一组一组的名值对结构
名和值之间使用冒号连接，多个名值对之间用逗号隔开
如果最后一个属性之后没有其它属性了，就不要加逗号了，避免浏览器出错

var obj = {
    name : "Tom",
    age : 28,
    gender : "男",
    test : {name :"唐僧"}
}
console.log(obj);

 

46. 函数的简介

函数也是一个对象
函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）

创建函数对象：
方式一：构造函数
语法：函数对象( ) 如： var fun = new Function( );
可以将要封装的代码以字符串的形式传递给构造函数
封装到函数中的代码不会立即执行，在调用时按顺序执行代码
实际开发中很少使用构造函数来创建一个对象
 
方式二：函数声明
语法：function 函数名([形参1,形参2…,形参n]){语句… }
如：function fun( ){ 语句…}
封装到函数中的代码不会立即执行，在调用时按顺序执行代码
 
方式三：函数表达式
语法：var 函数名 = function([形参1,形参2…,形参n]){语句… };
如：var fun = function([形参1,形参2…,形参n]){语句… };

var fun1 = new Function("console.log('Hello!第一种方式')");
fun1();

function fun2(){
    console.log(('Hello!第二种方式'))
}
fun2();

var fun3 = function(){
    console.log(('Hello!第三种方式'))
};//赋值语句，注意分号
fun3();

【注意】第一种方式和第三种方式末尾有分号

 

47. 函数的参数

可以在函数的（）中指定一个或多个形参（形式参数）

多个形参之间使用逗号隔开，声明形参相当于在函数内部声明了对应的变量

在调用函数时，可以在（）内指定实参（实际参数），实参将赋值给函数中对应的形参

调用函数时解析器不会检查实参的类型，所以要注意是否有可能接收到非法的参数
调用函数时不会检查实参的数量
多余实参不会被赋值
如果实参的数量少于形参的数量，则没有对应实参的形参将会是undifined

function sum(a,b){
    console.log(a+b);
}

sum(1,2);

sum(1," hello");
sum(true,1);//

sum(1,2,3);//多余实参

sum(1);//缺少实参

 

48. 函数的返回值

return后的值就是函数的执行结果，可以定义一个变量来接收结果

在函数return后的语句都不会执行
如果return语句后不跟任何值就相当于返回一个undifined
如果函数中不写return，则也会返回undifined

function sum1(a,b,c){
    var d = a + b + c;
    return d;
    console.log(123);//不会执行
}
var e = sum1(1,2,3);
console.log(e);

function sum2(a,b,c){
    var d = a + b + c;
    return;//return不跟任何值
}
var f = sum2(1,2,3);
console.log(f);

function sum3(a,b,c){
    var d = a + b + c;
    //不写return
}
var g = sum3(1,2,3);
console.log(g);

 

49. 实参

问题1：定义一个函数，判断一个数字是否为偶数，如果是返回true，否则返回false

问题2：定义一个函数，根据半径求圆的面积

问题3：定义一个函数，可以从控制台中输出一个人的信息

实参可以是任意的数据类型，也可以是一个对象，当参数过多时，可以考虑将参数封装到对象中进行传递
实参也可以是函数，注意传递fun和fun( )的区别

function isOu(num){
    return num % 2 == 0; 
}

var result = isOu(99);
console.log(result);

function mainji(r){
    return 3.14*r*r;
}
result = mainji(5);
console.log(result);

function sayHello(o){
    console.log("我是"+o.name+",今年我"+o.age+"岁了,"+"我是一个"+o.gender+"人"+",我住在"+o.address);
}
var obj = {
    name : "孙悟空",
    age : 18,
    gender : "男",
    address : "花果山"
}
sayHello(obj);//实参为对象

function fun(a){
    console.log(a);
} 

fun(function(){console.log("我是匿名对象")});
fun(mainji);//实参为函数对象
fun(mainji(1));//实参为调用函数，相当于使用函数的返回值

 

50. 返回值的类型

return可以结束整个函数
break可以退出当前循环
continue可以结束当次循环

返回值可以是任何的数据类型，可以为一个对象或函数

function fun1(){
    for(var i=0;i<5;i++){
        if(i==2){
            return ;
            // break;
            // continue;
        }
        console.log(i)
    }
}
fun1();

function fun2(){
    return {name:"Tom"};//返回值可以是对象
}
var a = fun2();
console.log(a.name);

function fun3(){
    function fun4(){
        console.log("我是fun4")
    }
    return fun4;//返回值可以是函数对象
}
a = fun3();
a();//定义变量a为fun3()再调用，此句相当于fun4()

fun3()();//没有另外定义变量

【注意】如果直接调用fun4( )，可以发现是报错的，提示你fun4函数没有定义。因为fun4函数是声明在fun3函数里面的，没有在外面显示声明，只能通过fun3函数来调用fun4函数

 

下一章节将对对象进行更加深入的了解！