検索
ホームページウェブフロントエンドjsチュートリアルよく使用される JavaScript の知識ポイントをまとめたもの

JavaScriptは、ECMAScript標準に従って設計および実装されています。後述するJavaScript構文は、実際にはES5標準の実装です。

まず、基本的な文法とは何でしょうか?

最も基本的な文法は何ですか?

ほぼすべての言語の基本構文にはほとんど違いはなく、データ型演算子制御ステートメント関数など以外は何もありません。ここに簡単なリストを示します。

5 つの基本データ型と 1 つの複雑なデータ型

JavaScript には 5 つの基本データ型、つまり、未定義 / Null / Boolean / Number / String が含まれており、これらが 5 つの基本データ型であり、他にはありません。

JavaScript には、オブジェクト型である 1 つの複合データ型が含まれています。オブジェクト型は、他のすべてのオブジェクトの基本クラスです。

注: JavaScript は浮動小数点数と整数を区別せず、それらはすべて Number で表されます。

先ほど述べた 5 つの基本データ型と、ここでの 1 つの複雑なデータ型、これがすべてのデータ型です。

基本演算子

これは常識です。何が起こっているのかを知っておいてください。

一般的に使用される演算子には、算術演算子、関係演算子、ブール演算子、代入演算子などが含まれます。

制御ステートメント

これは、if-else などの制御ステートメントとよく呼ばれるものです。

一般的に使用されるものはそれほど多くありません: if ステートメント、switch ステートメントfor ステートメントwhile ステートメント、for-in ステートメント。

関数

関数は、ロジックの小さな部分をカプセル化したものです。理論的には、ロジックの独立性が高いほど優れています。

JavaScript 関数は他の言語とは大きく異なります。 JavaScript 関数はパラメータと戻り値の両方を受け取ることができます。

さらに、JavaScript 関数は任意の数のパラメーターを受け入れることができ、これらのパラメーターには引数オブジェクトを通じてアクセスできます。

どの言語でも基本的な構文は同じですが、いくつかの細かい違いはありますが、データ型、演算子、制御ステートメント、関数、モジュールなどはおおよそ上記のとおりです。

次に、もう少し複雑な概念をいくつか紹介します。

変数、スコープ、メモリの問題

変数

JavaScript 変数は、基本型と参照型の 2 つの型に分類されます。基本型は前述の 5 つの基本データ型であり、参照型は前述の Object とそれに基づくその他の複雑なデータ型です。

✦ 基本タイプ: メモリ内の実際のサイズのスペースを占有し、値を割り当てると、メモリ内に新しいコピーが作成されます。スタックメモリに保存されます。

✦ 参照型: オブジェクト自体ではなく、オブジェクトへのポインター。値を割り当てると、オブジェクトを指す新しいポインターが作成されます。ヒープメモリに保存されます。

よく使用される JavaScript の知識ポイントをまとめたもの

一言で言えば、基本型はメモリ内の実際の値ですが、参照型はオブジェクトを指すメモリ内のポインタであり、複数の参照型が同じものを指す場合があります。同時に対象となります。

それでは、特定の変数がどのデータ型であるかを判断するにはどうすればよいでしょうか?

変数がどの基本型であるかを判断するには、typeof 演算子を使用します。

変数がどの参照型であるかを判断するには、instanceof 演算子を使用します。

これを忘れないでください!

スコープ

変数は、特定のスコープで宣言され、スコープによって、これらの変数の

ライフサイクル

と、その中の変数にアクセスできるコードが決まります。 JavaScript スコープにはグローバル スコープと

関数スコープ

のみが含まれ、ブロックレベルのスコープは含まれません。 スコープをネストしてスコープ チェーンを形成できます。スコープチェーンの存在により、変数の検索を上方向にたどることができます。つまり、子関数は親関数のスコープ => 祖先関数のスコープ => グローバルスコープまでアクセスできます。関数はクロージャとも呼ばれます。後で紹介します。

var color = "blue"; function changeColor() { var anotherColor = "red"; function swapColors() { var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor; // 这里可以访问color、anotherColor、tempColor  } // 这里可以访问color、anotherColor,但不能访问tempColor swapColors();
} // 这里只能访问color、changeColor();

以下の図に示すように、各スコープおよびネストされたスコープにアクセスできる変数を上にたどることができます。

よく使用される JavaScript の知識ポイントをまとめたものスコープチェーン

スコープの概念は単純に見えますが、実際に使用すると多くの問題が発生します。問題が発生した場合は、注意深く分析する必要があります。

メモリの問題

JavaScript エンジンには自動ガベージ コレクション メカニズムがあるため、メモリ割り当てやガベージ コレクションの問題にあまり注意を払う必要はありません。ここでは詳しく説明しません!

参照型

前述したように、複合データ型は Object のみであり、参照型は Object 型から継承されます。

Array

: 配列型

Date

: 日付型 ✦ RegExp:

正規表現

型、これについて詳しく学ぶと良いでしょう。

✦ 等等...

那问题来了,我们用的最多的函数是什么数据类型呢?答案是Function类型!

诶,好像发现了点什么东西?由于Function是引用类型,而JavaScript又可以往引用类型上加属性和方法。那么,函数也可以!这也是JavaScript函数强大和复杂的地方。也就是说:函数也可以拥有自定义方法和属性!

此外,JavaScript对前面提到的5种基本类型的其中3种也做了引用类型封装,分别是Boolean、Number、String,但其实使用不多,了解就行。

对了,在所有代码执行之前,作用域就内置了两个对象,分别是Global和Math,其中浏览器的Global就是window啦!

到此为止,JavaScript中基础的概念都差不多介绍了,其中函数和作用域相对来说复杂一些,其他的都比较浅显。

接下来,我会介绍介绍JavaScript中一些稍微复杂一些的概念:面向对象

面向对象编程

JavaScript本身并没有类和接口的概念了,面向对象都是基于原型实现的。

为了简单,我们只分析面向对象的两个问题:

✦ 如何定义一个类?

✦ 如何实现类的继承

定义一个类

不扯其他的,直接告诉你。我们使用构造函数+原型的方式来定义一个类。

使用构造函数创建自定义类型,然后使用new操作符来创建类的实例,但是构造函数上的方法和属性在每个示例上都存在,不能共享,于是我们引入原型来实现方法和属性的共享。

よく使用される JavaScript の知識ポイントをまとめたもの

原型

最后,我们将需要共享的方法和属性定义在原型上,把专属于实例的方法和属性放到构造函数中。到这儿,我们就通过构造函数+原型的方式定义了一个类。

// 构造函数 function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.friends = ["Shelby", "Court"];

} // 原型 Person.prototype = { constructor: Person,
    sayName: function() { return this.name;
    }
} // 实例化 var person1 = new Person("Nicholas", 29, "Software Engineer"); var person2 = new Person("Greg", 27, "Doctor");

person1.friends.push("Van");
alert(person1.friends); //输出"Shelby,Count,Van" alert(person2.friends); //输出"Shelby,Count" alert(person1.friends === person2.friends); //输出false alert(person1.sayName === person2.sayName); //输出true

实现继承

前文讲了如何定义一个类,那么我们定义一个父类,一个子类。

如何让子类继承父类呢?不扯别的,直接告诉你。JavaScript通过原型链来实现继承!

如何构建原型链呢?将子类实例赋值给父类构造函数的原型即可。好绕,但是千万得记住了!

よく使用される JavaScript の知識ポイントをまとめたもの

原型链继承

构建原型链之后,子类就可以访问父类的所有属性和方法!

// 父类 function SuperType() { this.property = true;
}
SuperType.prototype.getSuperValue = function() { return this.property;
}; // 子类 function SubType() { this.subproperty = false;
} //子类继承父类 SubType.prototype = new SuperType(); //给子类添加新方法 SubType.prototype.getSubValue = function() { return this.subproperty;
}; //重写父类的方法 SubType.prototype.getSuperValue = function() { return false;
}; // 实例化 var instance = new SubType(); console.log(instance.getSuperValue()); //输出false

面向对象的知识可以用一本书来写,这儿只是简单的介绍下最基础最常用的概念。

函数表达式

JavaScript中有两种定义函数的方式:函数声明和函数表达式。

使用函数表达式无须对函数命名,从而实现动态编程,也即匿名函数。有了匿名函数,JavaScript函数有了更强大的用处。

递归

递归是一种很常见的算法,经典例子就是斐波拉契数列。也不扯其他的,直接说递归的最佳实践,上代码:

// 最佳实践,函数表达式 var factorial = (function f(num) { if (num <= 1) { return 1;
    } else { return num * f(num - 1);
    }
}); // 缺点: // factorial存在被修改的可能 // 导致 return num * factorial(num - 1) 报错 function factorial(num) { if (num <= 1) { return 1;
    } else { return num * factorial(num - 1);
    }
} // 缺点: // arguments.callee,规范已经不推荐使用 function factorial(num) { if (num <= 1) { return 1;
    } else { return num * arguments.callee(num - 1);
    }
}

递归就是这样,好多人还在使用arguments.callee的方式,改回函数表达式的方式吧,这才是最佳实践。

啰嗦一句,好多人觉得递归难写,其实你将其分为两个步骤就会清晰很多了。

✦ 边界条件,通常是if-else。

✦ 递归调用。

按这个模式,找几个经典的递归练练手,就熟悉了。

闭包

很多人经常觉得闭包很复杂,很容易掉到坑里,其实不然。

那么闭包是什么呢?如果一个函数可以访问另一个函数作用域中的变量,那么前者就是闭包。自然,创建闭包的常用方式就是在一个函数内部创建另一个函数!

并没有什么神奇的,这就是闭包,闭包就是一个理所当然的现象,也就是在父函数中定义子函数,然后子函数可以访问父函数的作用域。

我们通常是因为被闭包坑了,才会被闭包吓到,尤其是面试题里一堆闭包。

闭包的定义前面提了,如何创建闭包也说了,那么我们说说闭包的缺陷以及如何解决?

/* 我们通过subFuncs返回函数数组,然后分别调用执行 */ // 返回函数的数组subFuncs,而这些函数对superFunc的变量有引用 // 这就是一个典型的闭包 // 那么有什么问题呢? // 当我们回头执行subFuncs中的函数的时候,我们得到的i其实一直都是10,为什么? // 因为当我们返回subFuncs之后,superFunc中的i=10 // 所以当执行subFuncs中的函数的时候,输出i都为10。 //  // 以上,就是闭包最大的坑,一句话理解就是: // 子函数对父函数变量的引用,是父函数运行结束之后的变量的状态 function superFunc() { var subFuncs = new Array(); for (var i = 0; i < 10; i++) {
        subFuncs[i] = function() { return i;
        };
    } return subFuncs;
} // 那么,如何解决上诉的闭包坑呢? // 其实原理很简单,既然闭包坑的本质是:子函数对父函数变量的引用,是父函数运行结束之后的变量的状态 // 那么我们解决这个问题的方式就是:子函数对父函数变量的引用,使用运行时的状态 // 如何做呢? // 在函数表达式的基础上,加上自执行即可。 function superFunc() { var subFuncs = new Array(); for (var i = 0; i < 10; i++) {
        subFuncs[i] = function(num) { return function() { return num;
            };
        }(i);
    } return subFuncs;
}

综上,闭包本身不是什么复杂的机制,就是子函数可以访问父函数的作用域。

而由于JavaScript函数的特殊性,我们可以返回函数,如果我们将作为闭包的函数返回,那么该函数引用的父函数变量是父函数运行结束之后的状态,而不是运行时的状态,这便是闭包最大的坑。而为了解决这个坑,我们常用的方式就是让函数表达式自执行。

此外,由于闭包引用了祖先函数的作用域,所以滥用闭包会有内存问题。

好像把闭包说得一无是处,那么闭包有什么用处呢?

主要是封装吧...

封装

闭包可以封装私有变量或者封装块级作用域。

➙ 封装块级作用域

JavaScript并没有块级作用域的概念,只有全局作用域和函数作用域,那么如果想要创建块级作用域的话,我们可以通过闭包来模拟。

创建并立即调用一个函数,就可以封装一个块级作用域。该函数可以立即执行其中的代码,内部变量执行结束就会被立即销毁。

function outputNumbers(count) { // 在函数作用域下,利用闭包封装块级作用域 // 这样的话,i在外部不可用,便有了类似块级作用域 (function() { for (var i = 0; i < count; i++) {
            alert(i);
        }
    })();

    alert(i); //导致一个错误!  } // 在全局作用域下,利用闭包封装块级作用域 // 这样的话,代码块不会对全局作用域造成污染 (function() { var now = new Date(); if (now.getMonth() == 0 && now.getDate() == 1) {
        alert("Happy new year!");
    }
})(); // 是的,封装块级作用域的核心就是这个:函数表达式 + 自执行! (function() { //这里是块级作用域 })();

➙ 封装私有变量

JavaScript也没有私有变量的概念,我们也可以使用闭包来实现公有方法,通过隐藏变量暴露方法的方式来实现封装私有变量。

(function() { //私有变量和私有函数 var privateVariable = 10; function privateFunction() { return false;
    } //构造函数 MyObject = function() {}; //公有/特权方法 MyObject.prototype.publicMethod = function() {
        privateVariable++; return privateFunction();
    };
})();

总结说点啥?

这差不多就是JavaScript的一些基础语法和稍微高级一些的用法,其实所谓的高级,都是JavaScript“不太成熟”的表现,尤其是面向对象,出于工程化的需要但是JavaScript本身并不完美支持。好在ES6最新标准解决了很多问题,结合Babel用起来也不用太考虑兼容性问题,如果你是新手的话,建议你直接去撸ES6+Babel吧。

✦ JavaScript的基础主要包括:5中基本数据类型、1种复杂的数据类型、操作符、控制语句、函数等。

✦ 了解基本的语法后,你还需要学习学习JavaScript的变量、作用域、作用域链。

✦ 常见的引用类型可以边查边用。作为过来人,建议多学学正则,对你的代码功底会有较大的提升。

✦ 面向对象编程的部分外面有很多种方式,你只需要记住使用构造函数+原型去定义一个类,使用原型链去实现继承即可。更多的扩展,去翻翻书吧。

✦ 函数表达式引出了几个比较好玩的东西:递归、闭包、封装。记住递归的最佳实践、闭包的定义及缺陷、闭包的适用场景。

JavaScript作为一门动态语言,和其他语言有较大的差异,这也造成很多人学习JavaScript时会觉得难学。但你现在看看前文,虽然是一个简略的总结,但JavaScript主要的内容就这些了,所以不要被自己吓到了。


以上がよく使用される JavaScript の知識ポイントをまとめたものの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
node.jsは、型を使用してストリーミングしますnode.jsは、型を使用してストリーミングしますApr 30, 2025 am 08:22 AM

node.jsは、主にストリームのおかげで、効率的なI/Oで優れています。 ストリームはデータを段階的に処理し、メモリの過負荷を回避します。大きなファイル、ネットワークタスク、リアルタイムアプリケーションの場合。ストリームとTypeScriptのタイプの安全性を組み合わせることで、パワーが作成されます

Python vs. JavaScript:パフォーマンスと効率の考慮事項Python vs. JavaScript:パフォーマンスと効率の考慮事項Apr 30, 2025 am 12:08 AM

PythonとJavaScriptのパフォーマンスと効率の違いは、主に以下に反映されています。1)解釈された言語として、Pythonはゆっくりと実行されますが、開発効率が高く、迅速なプロトタイプ開発に適しています。 2)JavaScriptはブラウザ内の単一のスレッドに限定されていますが、マルチスレッドおよび非同期I/Oを使用してnode.jsのパフォーマンスを改善でき、両方とも実際のプロジェクトで利点があります。

JavaScriptの起源:その実装言語の調査JavaScriptの起源:その実装言語の調査Apr 29, 2025 am 12:51 AM

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。

舞台裏:JavaScriptをパワーする言語は何ですか?舞台裏:JavaScriptをパワーする言語は何ですか?Apr 28, 2025 am 12:01 AM

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1)解析段階で抽象的構文ツリー(AST)を生成します。 2)ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3)実行段階でコンパイルされたコードを実行します。

PythonとJavaScriptの未来:傾向と予測PythonとJavaScriptの未来:傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript:開発環境とツールPython vs. JavaScript:開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1)Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2)JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか?証拠を調べるJavaScriptはCで書かれていますか?証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1)C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2)V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3)JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割:WebをインタラクティブでダイナミックにするJavaScriptの役割:WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1)ページを更新せずにコンテンツを変更できます。2)Domapiを介してWebページを操作する、3)アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4)ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。