JS阶段性总结

2021-10-07 18:05:41 作者：互联网

JS总结

1.函数

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

圆括号可包括由逗号分隔的参数,由函数执行的代码被放置在花括号中：{}

function name(参数 1, 参数 2, 参数 3) {
    //要执行的代码
}

在函数中，参数是局部变量。

1.1函数调用

函数中的代码将在其他代码调用该函数时执行：

当事件发生时（当点击按钮时）
当 JavaScript 代码调用时
自动的（自调用）

<html>
    <head>
        <meta charset="utf-8">
        <title> </title>
    </head>
    <body>
        <button onclick="fn()">点击调用函数</button>
        <script>
            // 必须有 function关键字，命名通常为驼峰命名，首字母小写
            function fn(){
                alert("已调用");
            }
        </script>
    </body>
</html>

1.2函数返回 return

当 JavaScript 到达 return 语句，函数将停止执行。

如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。

函数通常会计算出返回值。这个返回值会返回给调用者：

var x = myFunction(7, 8);        // 调用函数，返回值被赋值给 x

function myFunction(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}
//x 的结果将是：56

1.3形参和实参

形参 : 函数中定义的变量（此时是没有值的，只是一个代称）
实参 : 在运行时的函数调用时传入的参数（实际的值
js中，方法中即使定义了形参，调用时不传实参也不会报错

 <body>
        <!-- 这里的3和4是实参 -->
        <button onclick="Num(3, 4)">计算3+4的值</button>
        <script>
            // 此处的num1，与num2便是形参
            function Num(num1, num2){
                alert(num1 + num2)
            }
        </script>
    </body>

1.4 js的内置对象 arguments

它是函数一创建就有的
是一个类数组（并不是真正的数组）
方法调用时，可以得到所有传进来的参数
你传多少，我就能拿到多少

1.5局部变量

在 JavaScript 函数中声明的变量，会成为函数的局部变量。

局部变量只能在函数内访问。

函数运行完之后就会销毁（垃圾回收机制），所以外界无法访问

变量应尽量避免重名（局部与全局变量可能会混淆，导致一些意料之外的问题）

// 此处的代码不能使用 carName

function myFunction() {
    var carName = "Volvo";
    // code here CAN use carName
}

// 此处的代码可以使用 carName

2.事件

HTML 事件是发生在 HTML 元素上的“事情”。

当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。

2.1HTML事件

HTML 网页完成加载
HTML 输入字段被修改
HTML 按钮被点击

通常，当事件发生时，用户会希望做某件事。

JavaScript 允许您在事件被侦测到时执行代码。通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序。

2.2常见的HTML事件

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

2.3 JavaScript 能够做什么？

事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作：

每当页面加载时应该做的事情
当页面被关闭时应该做的事情
当点击按钮时应该被执行的动作
当输入数据时应该被验证的内容

让 JavaScript 处理事件的不同方法有很多：

HTML 事件属性可执行 JavaScript 代码
HTML 事件属性能够调用 JavaScript 函数
能够向 HTML 元素分配自己的事件处理函数
能够阻止事件被发送或被处理

3.JavaScript对象

在JS里万物皆为对象

3.1对象属性

（JavaScript 对象中的）名称:值对被称为属性。

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

属性	属性值
firstName	Bill
lastName	Gates
age	62
eyeColor	blue

3.2对象方法

对象也可以有方法。

方法是在对象上执行的动作。

方法以函数定义被存储在属性中。

属性	属性值
firstName	Bill
lastName	Gates
age	62
eyeColor	blue
fullName	function() {return this.firstName + " " + this.lastName;}

方法是作为属性来存储的函数。

实例：

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

3.3对象定义

对象是变量的容器
写法以键值对的方式（键名：键值）
键值对称之为对象的属性
循环对象一般用 for in

// 对象定义
let person = {
    firstName:"ouyang",
    lastName:"xiu",
    age:18
};

// 循环对象
for(let key in person){
    console.log(key);   // 键名
    console.log(person[key])    // 键值
}

3.4 this关键词

在函数定义中，this 引用该函数的“拥有者”。

在上面的例子中，this 指的是“拥有” fullName 函数的 person 对象。

4.JavaScript prototype原型对象

此属性是函数特有的，每个函数都会默认添加一个，用于继承属性和方法。

JavaScript prototype 属性允许您为对象构造器添加新属性：

// 对象定义
let person = {
    firstName:"ouyang",
    lastName:"xiu",
    age:18
};

// 循环对象
for(let key in person){
    console.log(key);   // 键名
    console.log(person[key])    // 键值
}

JavaScript prototype 属性也允许您为对象构造器添加新方法：

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};

标签：总结,阶段性,函数,function,JavaScript,JS,对象,HTML,属性
来源： https://blog.csdn.net/g23jk/article/details/120639066