JavaScript (七）——JavaScript 对象和函数

news2024/9/21 19:04:01

JavaScript 对象

真实生活中的对象，属性和方法

JavaScript 对象

对象定义

对象属性

访问对象属性

对象方法

JavaScript 函数

JavaScript 函数语法

调用带参数的函数

带有返回值的函数

局部 JavaScript 变量

全局 JavaScript 变量

JavaScript 变量的生存期

向未声明的 JavaScript 变量分配值

JavaScript 对象

JavaScript 对象是拥有属性和方法的数据。

真实生活中的对象，属性和方法

让我们先用一个生活中的例子来理解一下

真实生活中，一辆汽车是一个对象。

对象有它的属性，如重量和颜色等，方法有启动停止等:

所有汽车都有这些属性，但是每款车的属性都不尽相同。

所有汽车都拥有这些方法，但是它们被执行的时间都不尽相同。

JavaScript 对象

在 JavaScript中，几乎所有的事物都是对象。

对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 name:value 对呈现。

var car = {name:"Fiat",model:500,color:"white"};

变量是用于存储信息的"容器"。

JavaScript 对象是变量的容器。

对象定义

使用字符来定义和创建 JavaScript 对象

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

定义 JavaScript 对象可以跨越多行，空格跟换行不是必须的

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

对象属性

可以说 "JavaScript 对象是变量的容器"。

但是，我们通常认为 "JavaScript 对象是键值对的容器"。

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为 对象属性。

访问对象属性

方式一：

person.lastName;

方式二：

person.["lastName"];

对象方法

对象的方法定义了一个函数，并作为对象的属性存储。

对象方法通过添加 () 调用 (作为一个函数)。

示例：

访问 person 对象的 fullName() 方法：

name = person.fullName();

访问 person 对象的 fullName 属性，它将作为一个定义函数的字符串返回

name = person.fullName;

JavaScript 对象是属性和方法的容器。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <script>
        var person = {
            firstName: "John",
            lastName: "Doe",
            id: 5566,
            fullName: function () {
                return this.firstName + " " + this.lastName;
            }
        };
        document.getElementById("demo1").innerHTML = "不加括号输出函数表达式：" + person.fullName;
        document.getElementById("demo2").innerHTML = "加括号输出函数执行结果：" + person.fullName();
    </script>
</body>

</html>

运行结果：

通常 fullName() 是作为 person 对象的一个方法， fullName 是作为一个属性。

如果使用 fullName 属性，不添加 (), 它会返回函数的定义

JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
    // 执行代码
}

当调用该函数时，会执行函数内的代码。

可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

调用带参数的函数

在调用函数时，可以向其传递值，这些值被称为参数。

这些参数可以在函数中使用。

可以发送任意多的参数，由逗号 (,) 分隔：

myFunction(argument1,argument2)

声明函数时，请把参数作为变量来声明：

function myFunction(var1,var2)
{
代码
}

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

示例：

<body>

<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
	alert("Welcome " + name + ", the " + job);
}
</script>

</body>

函数很灵活，使用不同的参数来调用该函数，就会给出不同的消息

带有返回值的函数

有时，我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

function myFunction()
{
    var x=5;
    return x;
}

注意： 整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。

函数调用将被返回值取代：

var myVar=myFunction();

myVar 变量的值是 5，也就是函数 "myFunction()" 所返回的值。

即使不把它保存为变量，您也可以使用返回值：

document.getElementById("demo").innerHTML=myFunction();

"demo" 元素的 innerHTML 将成为 5，也就是函数 "myFunction()" 所返回的值。

示例：
计算两个数字的乘积，并返回结果

<body>
<p id="demo"></p>
<script>
function myFunction(a,b){
	return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

</body>