ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptの基本構文をまとめて整理する
JavaScriptの基本構文をまとめて整理する
- WBOY転載
- 2022-08-03 18:16:032069ブラウズ
この記事では、javascript に関する関連知識を提供します。主に基本的な文法に関する問題を紹介します。JavaScript は、インターネット上で最も人気のあるスクリプト言語です。一緒に見てみましょう。助けなければなりません。
【関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド 】
はじめに
JavaScript はインターネット上で最も人気のあるスクリプト言語です。この言語は HTML と Web に使用でき、サーバー、PC、ラップトップ、タブレット、スマートフォン、その他のデバイスで広く使用できます。
JavaScript の機能
- JavaScript はスクリプト言語です。
- JavaScript は軽量のプログラミング言語です。
- JavaScript は、HTML ページに挿入できるプログラミング コードです。
- JavaScript を HTML ページに挿入すると、最新のすべてのブラウザで実行できます。
- JavaScript は習得が簡単です。
JavaScript は、ECMA (欧州コンピュータ製造者協会) によって ECMAScript を通じて言語として標準化されました。
| 名前 | 説明 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ECMAScript 1 | 最初のバージョン | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ECMAScript 2 | バージョン変更 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ECMAScript 3 | 正規表現の追加 | try/catch の追加||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ECMAScript 4 | 未リリース | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ECMAScript 5 | 「厳密モード」、厳密モードを追加 | JSON サポートを追加||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| バージョンの変更 | 2015 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| クラスとモジュールの追加 | 2016 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 指数演算子 (**) の追加 | 配列を追加します。プロトタイプ.includes
使用法HTML 内のスクリプトは、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグと 2cacc6d41bbb37262a98f745aa00fbf0 タグの間に配置する必要があります。スクリプトは、HTML ページの 6c04bd5ca3fcae76e30b72ad730ca86d セクションと 93f0f5c25f18dab9d176bd4f6de5d30e セクションに配置できます。 通常、ユーザーがボタンをクリックしたときなど、イベントが発生したときにコードを実行する必要があります。 JavaScript コードを関数内に配置すると、イベントが発生したときにその関数を呼び出すことができます。 例 1: ヘッド内のスクリプト関数 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>head标签中script</title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "这是我的函数";
}
</script>
</head>
<body>
<h1>我的函数</h1>
<p id="demo">一段话</p>
<button type="button" onclick="myFunction()">这是函数</button>
</body>
</html>例 2: 本文内のスクリプト関数 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>body中的script</title>
</head>
<body>
<h1>我的函数</h1>
<p id="demo">我的函数</p>
<button type="button" onclick="myFunction()">点击一下</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "这是我的函数"
}
</script>
</body>
</html>JavaScript を外部に配置して呼び出すこともできます。外部拡張子は.js。 例 3: JavaScript への外部呼び出し 外部 call.js function myFunction() {
document.getElementById('demo').innerHTML = "这是我的函数"
}外部スクリプトの呼び出し <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>调用外部script</title>
</head>
<body>
<p id="demo">一段文字</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script src="外部脚本.js"></script>
</body>
</html>出力JavaScript は次のとおりです。データを出力するための別の方法を経由します:
例 1: aler() ポップアップ ウィンドウの出力 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>alert输出</title>
</head>
<body>
<h1>alert输出</h1>
<script>
window.alert(5 + 6)
</script>
</body>
</html>例 2: document.write() の出力 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document.write输出</title>
</head>
<body>
<h1>document.write输出</h1>
<script>
document.write(Date());
document.write("Hello,Web!");
</script>
</body>
</html>例 3: HTMl ドキュメントへの書き込み <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>写到HTMl文档</title>
</head>
<body>
<h1>写到HTMl文档</h1>
<script>
function myFunction() {
document.write("函数输出");
}
</script>
<button onclick="myFunction()">点击这里</button>
</body>
</html>例 4: console.log() を使用してブラウザのコンソールに書き込む <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用console.log()写入到浏览器的控制台</title>
</head>
<body>
<h1>console.log()写入到浏览器的控制台</h1>
<script >
a = 5;
b = 6;
c = a + b;
console.log(c)
</script>
</body>
</html>構文の紹介JavaScript はスクリプト言語であり、軽量ですが、強力なプログラミング言語。 リテラル プログラミング言語では、一般的に固定値のことをリテラルと呼びます。
次の点に注意してください。 JavaScript では、ステートメントは「;」で終了する必要があります。 JavaScrip 変数 プログラミング言語では、変数はデータ値を格納するために使用されます。JavaScript ではキーワード var を使用します。変数を定義するには等号を使用し、変数に値を代入するには等号を使用します。変数は相互に作用できます: var y = false // 布尔值
var length = 16; // 数字
var points = x * 10; // 数字计算
var lastName = "Johnson"; // 字符串
var cars = ["Saab", "Volvo", "BMW"]; // 数组
var person = {firstName:"John", lastName:"Doe"}; // 对象字典JavaScript function In order to be possible同じ関数を使用すると、コードの作成とメンテナンスの利便性が低下します。JavaScript では、キーワード function によってガイドされる関数関数が提供されます。 function myFunc(a, b) {
return a + b; // 返回a+b结果
}JavaScript の機能 比較その他の言語、JavaScript 次のような特徴があります:
大部分语言能够自动补全空格，我们建议在运算符两边加上空格，这样清晰美观，但是要注意在HTML中空格的是要留意用法的，切勿混谈。在JavaScript中，下面两句话是一样的： var a = 10; var b=10; 与Python相似，JavaScript也是脚本语言，属于解释型。 对象定义对象 任何事物都是对象，具有相同特点的事物中抽象出来的一个特点实例。如人类中的小明。 在JavaScript中，对象就是是属性变量的容器，类似Python中的字典，Java中的哈希映射，其中定义了对象的属性。 var people = {
firstName: "Mike",
lastName: "Smith",
age: "18",
address: "Beijing",
job: "Student"
};以上就是对象定义，当然你也可以写作一行，我这样是为了美观，以后也强烈大家这样写。 访问对象属性 可以说 "JavaScript 对象是变量的容器"。但是，我们通常认为 "JavaScript 对象是键值对的容器"。键值对通常写法为key : value(键与值以冒号分割)，键值对在JavaScript对象通常称为对象属性。我们访问属性也是通过万能的" . "（大部分语言都是用的这个）。 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是网站</title>
</head>
<body>
<h1>访问类属性</h1>
<!--下面语句一定要在script之前-->
<p id="demo"></p>
<script>
var people = {
firstName: "Mike",
lastName: "Smith",
age: "18",
address: "Beijing",
job: "Student"
};
document.getElementById("demo").innerHTML =
people["firstName"] + "." + people.lastName;
</script>
</body>
</html>两种访问方式,你可以使用 对象名 .property 或 对象名.["property"] 。 函数函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。当调用该函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。 参数与返回值 在调用函数时，您可以向其传递值，这些值被称为参数，参数个数不限。
参数在调用时，应该严格按照其顺序传参，如下所示： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个JavaScript网站</title>
</head>
<body>
<h1>函数参数传递问题</h1>
<p>点击下面按钮调用</p>
<button onclick="myFunc('Mike','18','Beijing')">点击这里</button>
<script>
function myFunc(name, age, address) {
alert("My name is " + name + ", age is " + age + " and my home is in " + address);
}
</script>
</body>
</html>JavaScript函数允许有返回值，返回关键字为return。当函数返回值后，函数将停止执行，在return后面的语句将不会被执行。 实例：计算两个数的乘积并返回结果 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript网站</title>
</head>
<body>
<h1>计算两个数的值返回</h1>
<p id="demo"></p>
<script>
function myFunc(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunc(3, 4);
</script>
</body>
</html>变量 JavaScript变量分为两种：
当我们向未声明的JavaScript变量分配值时，该变量将被自动作为window的一个属性。如下列语句： name = "Mike"; 将声明window的一个属性name。非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。如： var var1 = 1; // 不可配置全局属性 var2 = 2; // 没有使用 var 声明，可配置全局属性 console.log(this.var1); // 1 console.log(window.var1); // 1 delete var1; // false 无法删除 console.log(var1); //1 delete var2; console.log(delete var2); // true console.log(var2); // 已经删除 报错变量未定义 事件描述 HTML事件是发生在HTML元素上的事情。当在 HTML 页面中使用JavaScript时， JavaScript可以触发这些事件。 HTML事件可以是浏览器行为，也可以是用户行为。以下是HTM 事件的实例：
通常，当事件发生时，你可以做些事情。在事件触发时JavaScript可以执行一些代码。HTML元素中可以添加事件属性，使用JavaScript代码来添加HTML元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript事件</title>
</head>
<body>
<h1>JavaScript事件处理两种方式</h1>
<p id="demoOne"></p>
<button onclick="getElementById('demoOne').innerHTML=Date()">点击查看时间1</button>
<p id="demoTwo"></p>
<button onclick="this.innerHTML=Date()">点击查看时间2</button>
</body>
</html>JavaScript通常是多行代码，比较差常见的就是通过事件属性调用。 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript事件</title>
</head>
<body>
<h1>JavaScript事件之属性调用</h1>
<p>点击执行<em>myFunc()</em>函数</p>
<button onclick="myFunc()">点击这里</button>
<p id="one"></p>
<script>
function myFunc() {
document.getElementById("one").innerHTML = Date();
}
</script>
</body>
</html>
后续会继续学习更多事件。 事件作用 事件可以用于处理表单验证，用户输入，用户行为及浏览器动作：
可以使用多种方法来执行 JavaScript 事件代码：
字符串字符串：一系列字符的集合。 var a = "abc"; var b = "Hello"; 与Python类似，可以使用索引来访问字符串中的每个字符： var c = b[1]; // e length 该属性可以计算字符串的长度。 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串长度</title>
</head>
<body>
<script>
var txtOne = "Hello World!";
document.write("<p>" + txtOne.length + "</p>");
var txtTwo = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write("<p>" + txtTwo.length + "</p>");
</script>
</body>
</html>JavaScript也有一些特殊字符，例如当我们要打印引号时，需要加上“\”来进行转义，否则编译器无法解析。
字符串作为对象 通常，JavaScript字符串是原始值，可以使用字符创建： var firstName = "Mike"，但我们也可以使用new关键字将字符串定义为一个对象：var firstName = new String("Mike")，这点与Java类似。
==与===区别 1、对于 string、number 等基础类型，== 和 === 是有区别的
2、对于 Array,Object 等高级类型，== 和 === 是没有区别的 进行 "指针地址" 比较 3、基础类型与高级类型，== 和 === 是有区别的
4、!= 为 == 的非运算，!== 为 === 的非运算 var num=1； var str="1"； var test=1； test == num //true 相同类型 相同值 test === num //true 相同类型 相同值 test !== num //false test与num类型相同，其值也相同, 非运算肯定是false num == str //true 把str转换为数字，检查其是否相等。 num != str //false == 的 非运算 num === str //false 类型不同，直接返回false num !== str //true num 与 str类型不同 意味着其两者不等 非运算自然是true啦 运算符
正则表达式正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。 search() 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<p>收索字符串，匹配位置</p>
<button onclick="myFuncOne()">CLICK HERE ONE</button>
<p id="one">HERE</p>
<button onclick="myFuncTwo()">CLICK HERE TWO</button>
<p id="two">HERE</p>
<script>
function myFuncOne() {
let str = "Hello,World!";
document.getElementById("one").innerHTML = str.search(/World/i);
}
function myFuncTwo() {
let str = "Welcome to China!";
document.getElementById("two").innerHTML = str.search("China");
}
</script>
</body>
</html>replace() 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<p>正则表达式replace()替换</p>
<button onclick="myFuncOne()">CLICK ONE</button>
<p id="one">Hello,Java</p>
<button onclick="myFuncTwo()">CLICK TWO</button>
<p id="two">Hello,Java</p>
<script>
function myFuncOne() {
let str = document.getElementById("one").innerHTML;
document.getElementById("one").innerHTML = str.replace(/Java/i, "Python");
}
function myFuncTwo() {
let str = document.getElementById("two").innerHTML;
document.getElementById("two").innerHTML = str.replace("Java","JavaScipt");
}
</script>
</body>
</html>正则表达式模式
test() 用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回true，否则返回false。 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<script>
let obj = new RegExp("e");
let boolOne = obj.test("Hello,This is JavaScript");
let boolTwo = obj.test("This is JavaScript");
document.write(boolOne + "<br>" + boolTwo);
</script>
</body>
</html>exec() 用于检索字符串中的正则表达式的匹配，该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<script>
let obj = new RegExp(/e/);
resOne = obj.exec("Hello,This is JavaScript");
resTwo = obj.exec("This is JavaScript");
/*没有就是null*/
document.write(resOne + "<br>" + resTwo);
</script>
</body>
</html>错误异常错误类型
try...catch try语句允许我们定义在执行时进行错误测试的代码块，catch语句允许我们定义当try代码块发生错误时，所执行的代码块。 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<input type="button" value="查看消息" onclick="myFunc()">
<script>
let txt = "";
function myFunc() {
try {
alert111("Hello,World!")
}
catch (err) {
txt = "这里有一个错误\n\n";
txt += "错误描述：" + err.message + "\n\n";
txt += "点击确定继续\n\n";
alert(txt)
}
}
</script>
</body>
</html>throw throw语句允许我们创建自定义错误。正确的技术术语是：创建或抛出异常（exception）。如果把throw与try和catch一起使用，那么您能够控制程序流，并生成自定义的错误消息。 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<p>请输入一个5-10之间的数字</p>
<label for="one"></label><input id="one" type="text">
<button type="button" onclick="myFunc()">CLICK</button>
<p id="message">HERE</p>
<script>
function myFunc() {
let message;
let x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("one").value;
try {
if (x === "")
throw "值为空";
if (isNaN(x))
throw "不是数字";
x = Number(x);
if (x < 5)
throw "太小";
if (x > 10)
throw "太大";
} catch (error) {
message.innerHTML = "错误" + error;
}
}
</script>
</body>
</html>函数调用JavaScript 函数有 4 种调用方式，每种方式的不同在于this的初始化。一般而言，在Javascript中，this指向函数执行时的当前对象。 调用1：作为一个函数调用 one function myFunc(a, b) {
return a * b;
}
myFunc(1, 2);two function myFunc(a, b) {
return a * b;
}
window.myFunc(1, 2);调用2：函数作为方法调用 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<p>函数作为方法调用</p>
<p id="one">HERE</p>
<script>
let myObject = {
firstName: "Bill",
lastName: "Gates",
fullName: function () {
return this.firstName + " " + this.lastName;
}
};
document.getElementById("one").innerHTML = myObject.fullName();
</script>
</body>
</html>调用3：使用构造函数调用函数 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<p>该实例中，myFunc()是函数的构造函数</p>
<p id="one"></p>
<script>
function myFunc(argOne, argTwo) {
this.Name = argOne;
this.Number = argTwo;
}
let x = new myFunc("Hello", 123);
document.getElementById("one").innerHTML = x.Name;
</script>
</body>
</html>调用4：作为函数方法调动函数 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<p>作为函数方法调动函数</p>
<p id="one">HERE</p>
<script>
let obj, array;
function myFunc(a, b) {
return a * b;
}
array = [5, 6];
obj = myFunc.apply(obj, array);
document.getElementById("one").innerHTML = obj;
</script>
</body>
</html>闭包内嵌函数 实际上，在JavaScript中，所有函数都能访问它们上一层的作用域。JavaScript支持嵌套函数，嵌套函数可以访问上一层的函数变量。内嵌函数plus()可以访问父函数的counter变量： <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<p>内嵌函数</p>
<p id="one">HERE</p>
<script>
document.getElementById("one").innerHTML = add();
function add() {
let counter = 0;
function plus() {
counter += 1;
}
plus();
return counter;
}
</script>
</body>
</html>闭包 函数的自我调用称为bibao <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<p>局部计数器</p>
<button type="button" onclick="myFunc()">计数器</button>
<p id="one">HERE</p>
<script>
let add = (function () {
let counter = 0;
return function () {
return counter += 1;
}
})();
function myFunc() {
document.getElementById("one").innerHTML = add();
}
</script>
</body>
</html>【相关推荐：javascript视频教程、web前端】 |
以上がJavaScriptの基本構文をまとめて整理するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
Python Java JavaScript json 正则表达式 ecmascript html 数据类型 String Array Object NULL 运算符 赋值运算符 比较运算符 逻辑运算符 if if...else switch for while 构造函数 表单验证 date try throw catch 标识符 break continue 局部变量 全局变量 字符串 循环 指针 Length operator Regex Property Event var 闭包 类型转换 JS console number undefined function regexp 对象 作用域 事件 typeof constructor 一元运算符 严格模式 this prototype innerHTML alert input
声明：
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。