JavaScript基础 对象 函数

Posted 2021-09-28 HUMILITY

对象的简介

string 字符串，number 数值，Boolean 布尔值，null 空值，undefined 未定义。
以上这五种类型属于基本数据类型，以后我们看的值只要不是上边的五种，全都是对象。

Object 对象
如果使用基本数据类型的数据，我们所创建的变量都是独立，不能成为一个整体。
对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。

对象的分类：
1.内建对象（ES标准中定义的对象，在任何的ES的实现中都可以使用。）
比如：Math String Number Boolean Function Object...

2.宿主对象（由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象。）
比如：BOM DOM

3.自定义对象（由开发人员自己创建的对象）

对象的基本操作

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

var obj = new Object();

添加属性
在对象中保存的值称为属性
向对象添加属性
语法：对象.属性名 = 属性值

向obj中添加一个name属性
obj.name = "孙悟空";
向obj中添加一个gender属性
obj.gender = "男";
向obj中添加一个age属性
obj.age = "18"

读取对象中的属性
语法：对象.属性名

console.log(obj.gender)

如果读取对象中没有的属性，不会报错而是会返回undefined

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

obj.name = "Tom"
console.log(obj.name)   //Tom覆盖孙悟空

删除对象的属性
语法：delete 对象.属性名；

delete obj.name;

属性名和属性值

属性名
对象的属性名不强制要求遵守标识符的规范，什么乱七八糟的名字都可以使用
但是尽量使用时按照标识符的规范去做
如果采用特殊的属性名，不能采用.的方式来操作，需要使用另一种方式。
读取时也要采用这种方式。
语法：对象["属性名"] = 属性值

obj["123"] = 789

使用[]这种形式去操作属性，更加的灵活
在[]中可以直接传递一个变量，这样变量值是多少就会读取哪个属性

obj["123"] = 789;
obj["nihao"] = "你好"

var n = "nihao";
console.log(obj[n]);  //输出你好

属性值
JS对象的属性值，可以是任意的数据类型。甚至也可以是一个对象

    var obj = new Object();
    obj.name = "猪八戒";
    var obj2 = new Object();

    obj2.name = "孙悟空";

    obj = obj2 //将obj2设置为obj的属性

    console.log(obj) //输出孙悟空

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

  console.log("name" in obj);  //返回true
  

基本数据类型和引用数据类型

基本数据类型
JS中的变量都是保存在栈内存中的，
基本数据类型的值直接在栈内存中存储。
值与值之间是独立存在的，修改一个变量不会影响其他的变量

引用数据类型
对象是保存在堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间而变量保存的是变量的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，当一个头盖骨一个变量修改属性时，另一个也会受到影响。

当比较两个基本数据类型的值时，就是比较值。
而比较两个引用数据类型时，它是比较的对象的内存地址
如果两个对象是一模一样的，但是地址不同，它也会返回false

对象字面量

使用对象字面量来创建一个字面量，更加简单。

var obj = {}；

使用对象字面量。可以在创建对象时，直接指定对象中的属性。
对象字面量的属性名可以加引号也可以不加，建议不加，
如果要使用一些特殊的名字，则必须加引号
属性名和属性值是一组一组的名值对结构，
名和值之间使用:（冒号）连接，多个名值对之间使用,（逗号）隔开
如果一个属性之后没有其他的属性了，就不要写，（逗号）
语法：{属性名:属性值,属性名:属性值...}

var obj2 = {name:"猪八戒"，
            age:28,
            gender:"男"  
}；

函数（function）的简介

函数也是一个对象
函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）
函数中可以保存一些代码在需要的时候调用
使用typeof检查一个函数对象时，会返回function

方法一：创建一个函数对象（很少使用这个构造函数）
我们在实际开发中很少使用构造函数

var fun = new Function();

可以将要封装的代码以字符串的形式传递给构造函数

var fun = new Function("console.log(\'hello 这是我的第一个函数\');");

封装到函数中的代码不会立即执行
函数中的代码会在函数调用的时候执行
调用函数语法，函数对象()
当调用函数时，函数中封装的代码会按照顺序执行

fun();

方法二：使用函数声明来创建一个函数
语法：

function 函数名([形参1，形参2...形参N]){
            语句...
}

function fun2(){
    console.log("这是我第二个函数");
    alert("哈哈啊");
    document.write("哦吼，起飞！");
}

fun2()      //调用函数

方法三：使用函数表达式来创建一个函数
语法：

var 函数名 = function([形参1，形参2...形参N]){
            语句...
};

var fun3 = function(){
    console.log("我是匿名函数中封装的代码");
};

fun3();     //调用函数

函数的参数

可以在函数的()中来指定一个或多个形参（形式参数）
多个形参之间使用,(逗号）隔开，声明形参就相当于在函数内部声明了对应的变量
但是并不赋值

定义一个用来求两个数和的函数
function sum(a,b){
    console.log(a+b);
};

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

sum(1,2);       //输出3
sum(123,456);   //输出579   可以多次调用

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

sum(123,456,"hello",true,false)；     //输出579
sum(123);                             //输出NaN

函数的返回值

创建一个函数，用来计算三数之和
可以使用return 来设置函数的返回值
语法：

    return 值

return后的值将会作为函数的执行结果返回
可以定义一个变量来接收该结果
在函数中return后的代码都不会执行
如果return语句后不跟任何值就相当于返回一个undefined，
如果函数中不写return，则也会返回undefined。

return后可以跟任意类型的值

function sum(a,b,c){
    
    var d = a + b + c；
    
    return d;
};

调用函数
变量result的值就是函数的执行结果
函数返回声明result的值就是什么

var result = sum(4,7,8);

console.log("result = "+result);    //输出result = 19

实参可以是任意值

实参可以是任意的数据类型，也可以是一个对象
当我们的参数过多时，可以将参数封装到一个对象中，如何通过对象传递

    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){
    a(obj);
}
fun(sayHello);

返回值的类型

function fun(){
    alert("函数要执行了");

    for(var i=0 ; i<5 ; i++){
                
        if(i==2){
            break;      //使用退出当前循环
            continue;   //用于跳过档次循环
            return;     //用于结束整个函数
        }
            console.log(i);
    }
            alert("函数要执行完了");
 }
fun();

返回值可以是任意的数据类型
也可以是对象
也可以是一个函数

立即执行函数

函数定义完立即被调用，这种函数叫做立即执行函数
立即执行函数，往往只会执行一次

(function(){
    alert("我是一个匿名函数");      //此函数加括号为一整体不会报错 不加会报错
})();

(function(a,b){
console.log("a="+a);
console.log("b="+b);
})(123,456);

方法

创建一个对象

var obj = new Object();

添加属性

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

对象的属性值可以是任何的数据类型，也可以是函数

obj.sayName = function(){
    console.log(obj.name);
}

function fun(){
    console.log(obj.name);
};

调方法

obj.sayName();

调函数

fun();

函数也可以成为对象的属性，
如果一个函数作为一个对象的属性保存
那么我们称这个函数是我们这个对象的方法
调用这个函数就说调用对象的方法（method）

但是它只是名称上的区别没有其他的区别

var obj2 = {
    name:"猪八戒",
    age:18,
    sayName:function(){
        console.log(obj2.name);     //输出孙悟空
    }
    
};

obj2.sayName();     //输出猪八戒

枚举对象中的属性使用for...in语句

语法：

for(var 变量 in 对象){

}

如

var obj = {
    name:"猪八戒",
    age:18,
    gender:"男",
    address:"花果山",
}
for(var n in obj){
    console.log("hello");       //输出4次hello，因为obj有四个属性
}        

for...in语句 对象中有几个属性，循环就会执行几次
每次执行时会将对象中的一个属性的名字赋值给变量

    for(var n in obj){
    console.log("属性名:"+n);            //输出对应属性名name，age，gender，address
    console.log("属性值:"+obj[n]);        //输出值孙悟空 18 男 花果山
}