コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptの基礎知識まとめ

JavaScriptの基礎知識まとめ

高洛峰
リリース： 2017-01-21 09:44:43
オリジナル
1345 人が閲覧しました

関数の外で定義された変数はグローバル変数でなければなりません。関数内で定義された変数の場合、var が宣言されている場合、その変数はローカル変数です。

1. グローバル変数とローカル変数

JavaScript

var global = "Global";
test();
function test(){
  var local = "Local";
  document.writeln(global);
  document.writeln(local);
}
document.writeln(global);
document.writeln(local);
ログイン後にコピー

2. 2 種類の Cookie

i) 永続的な Cookie はクライアントのハードドライブに保存されます。

ii) セッション Cookie: クライアントのハード ドライブには保存されませんが、ブラウザを閉じると、セッション Cookie はブラウザ プロセスのメモリに配置されます。

3. JavaScript では、関数 (関数) はオブジェクトです

4. JavaScript では、メソッド (関数) のオーバーロードの概念はありません

5. JavaScript には Function オブジェクトがあります。 all 定義されている関数はすべて Function オブジェクト型です。 Function オブジェクトによって受け入れられるすべてのパラメータは文字列型であり、最後のパラメータは実行される関数本体であり、前のパラメータは関数が実際に受け入れる必要があるパラメータです。

6. 隠しオブジェクト引数

JavaScript では、各関数には暗黙的なオブジェクト引数があり、これは実際に関数に渡されるパラメーターを表します。 argument.length は、実際に渡されるパラメータの数を表します。

7. 関数名.length

各関数オブジェクトには、関数が受け入れることが期待されるパラメーターの数を示す長さ属性があります。関数の引数とは異なります。 argument.length は、関数によって受け入れられるパラメータの実際の数を示します。

8. JavaScript には 5 つのプリミティブなデータ型があります

未定義、Null、Boolean、数値、および文字列。 (注: JavaScript には char データ型はありません)

未定義のデータ型には値が 1 つだけあります (未定義)。

Null データ型には値が 1 つだけあります: null;

ブール型の値は 2 つだけです: true と false ;

9. typeof 演算子

typeof は、変数の名前が続く単項演算子で、変数のデータ型を取得するために使用されます。戻り値は、未定義、ブール、数値、文字列、オブジェクトの 5 つです。

10. JavaScript では、関数が戻り値を宣言しない場合、null と unknown の関係は、実際には null から派生します。例:

nullと未定義の関係

JavaScript

alert(undefined == null);
//浏览器返回true
ログイン後にコピー

11. 強制型変換

JavaScriptには3種類の強制型変換があります: Boolean (値)、Number (値)、String (値) ）。

12. Object オブジェクト

JavaScript では、すべてのオブジェクトは Object オブジェクトから継承されます。

Object オブジェクト

JavaScript

var object = new Object();
for(var v in object){
  alert(v);
}
ログイン後にコピー

上記のコードでは、ブラウザは何も出力しません。これは、Object オブジェクトがプロパティを持たないという意味ではありません。次のコードは、Object オブジェクトのプロパティを列挙できるかどうかをテストします。 false が返された場合は、Object オブジェクトのプロパティを列挙できないことを意味します。

Object オブジェクトのプロパティを列挙できません

JavaScript

alert(object.propertyIsEnumerable("prototype"));
ログイン後にコピー

ブラウザに偽のダイアログ ボックスが表示される場合は、Object オブジェクトのプロパティを列挙できないことを意味します。

次に、ウィンドウ オブジェクトのプロパティが列挙できるかどうかを見てみましょう

ウィンドウ オブジェクトのプロパティは列挙できます

JavaScript

for (var v in window) {
  console.log(v);
}
ログイン後にコピー

Chrome ブラウザでは、ブラウザのデバッグが表示されます。多くのプロパティが出力されますコンソール。ウィンドウ オブジェクトのプロパティを列挙できることを示します。

13. JavaScript では、オブジェクトのプロパティを動的に追加または削除できます

JavaScript

var object = new Object();
alert(object.username);//undefined
  
object.username = "zhangsan";
alert(object.username);//zhangsan
  
object["password"] = "123";
alert(object.password);//123
  
delete object.username;//此时，username属性已经被删除
alert(object.username);
ログイン後にコピー


14. オブジェクトは JavaScript で最も一般的に定義されます。方法

オブジェクトを定義する最も一般的な方法

JavaScript

var object = {
  username:"zhangsan",
  password:12345
};
alert(object.username);
alert(object.password);
ログイン後にコピー

15、array

配列定義

JavaScript

//方法一
var array = new Array();
array.push(1);
array.push(2);
array.push(3);
alert(array.length);
  
//方法二（推荐）
var array = [1,25,4];
array.sort();
alert(array);
ログイン後にコピー

配列のsort()メソッドを呼び出すと、ブラウザは1、25を出力します, 4、これは私たちが期待していたものではありません。

JavaScript配列のsortメソッドでは、まずソート対象の内容を文字列に変換し(toString()メソッドを呼び出します)、その文字列の順序に従ってソートします。

次のメソッドは、期待する結果 (配列サイズによる並べ替え) を取得できます:

配列の並べ替え

JavaScript

function compare(num1,num2) {
  var temp1 = parseInt(num1);
  var temp2 = parseInt(num2);
  if (temp1 < temp2) {
    return -1;
  } else if (temp1 == temp2) {
    return 0;
  } else {
    return 1;
  }
}
  
var array = [1,25,3];
array.sort(compare);
alert(array);
ログイン後にコピー

次に、匿名関数を使用してそれを実装します:

匿名関数の並べ替え

JavaScript

var array = [1,25,3];
  
array.sort(function(num1,num2){
  var temp1 = parseInt(num1);
  var temp2 = parseInt(num2);
  if (temp1 < temp2) {
    return -1;
  } else if(temp1 == temp2) {
    return 0;
  } else {
    return 1;
  }
});
  
alert(array);
ログイン後にコピー

16. JavaScript でオブジェクトを定義する 5 つの方法 (JavaScript にはクラスの概念はなく、オブジェクトのみです) i) 既存のオブジェクトに基づいてプロパティとメソッドを拡張します

既存のオブジェクトに基づいてプロパティとメソッドを拡張します

JavaScript

var object = new Object();
//添加name属性
object.name = "zhangsan";
//添加sayName方法
object.sayName = function(name) {
  this.name = name;
  alert(this.name);
};
object.sayName("kyle");//调用sayName方法，name属性被修改为kyle，浏览器将打印kyle
ログイン後にコピー

最も単純な方法は、使用するのが不便ですが、オブジェクトが一時的に必要になる場合に適しています。

ii) ファクトリモードでオブジェクトを作成する

パラメータなしのファクトリメソッド:

JavaScript

//工厂方法
function createObject() {
  var object = new Object();//创建一个对象
  object.name = "zhangsan";//为该对象添加一个name属性
  object.password = "123";//为该对象添加一个password属性
  object.get = function() {//为该对象添加一个get方法
    alert(this.name+","+this.password);
  };
  return object;//返回该对象
}
  
var object1 = createObject();//调用createObject工厂方法创建对象object1
var object2 = createObject();//调用createObject工厂方法创建对象object2
object1.get();//调用对象get方法
object2.get();//调用对象get方法
ログイン後にコピー

パラメータ付きのファクトリメソッド:

JavaScript

function createObject(name,password) {
  var object = new Object();
  object.name = name;
  object.password = password;
  object.get = function() {
    alert(this.name+","+this.password);
  };
  return object;
}
  
var object1 = createObject("zhangsan","123");
var object2 = createObject("lisi","456");
object1.get();
object2.get();
ログイン後にコピー

パラメータなしとパラメータありの上記 2 つのファクトリメソッドの欠点:

オブジェクトが作成されるたびに、get メソッドがメモリ内に作成され、メモリを無駄に消費し、パフォーマンスに影響を与えます。私たちは 2 つの異なるオブジェクトを作成することを期待しています。それらのプロパティは異なりますが、メソッドは共有されています。したがって、次に createObject ファクトリ メソッドを改善する必要があります。

改善されたファクトリーメソッド:

JavaScript

function get(){
  alert(this.name+","+this.password);
}
  
function createObject(name,password) {
  var object = new Object();
  object.name = name;
  object.password = password;
  object.get = get;
  return object;
}
  
var object1 = createObject("zhangsan","123");
var object2 = createObject("lisi","456");
object1.get();
object2.get();
ログイン後にコピー

将get方法定义在createObject函数外面，这样每创建一个对象，get方法都是共用的。让一个函数对象被多个对象所共享，而不是每一个对象都拥有一个函数对象。

iii）构造函数方式创建对象

不带参数的构造函数：

JavaScript

function Person(){
  //在执行第一行代码前，js引擎会为我们生成一个对象
  this.name = "zhangsan";
  this.password = "123";
  this.getInfo = function() {
    alert(this.name+","+this.password);
  };
  
  //此处有一个隐含的return语句，用于将之前生成的对象返回（也是跟工厂方式不一样的地方）
}
  
var p1 = new Person();
p1.getInfo();
ログイン後にコピー

带参数的构造函数

JavaScript

function Person(name,password) {
  this.name = name;
  this.password = password;
  this.getInfo = function() {
    alert(this.name+","+this.password);
  };
}
  
var p1 = new Person("zhangsan","123");
var p2 = new Person("lisi","456");
p1.getInfo();
p2.getInfo();
ログイン後にコピー

iv）原型（prototype）方式创建对象

prototype是Object对象里面的一个属性

prototype

JavaScript

function Person(){
  
}
Person.prototype.name = "zhangsan";
Person.prototype.password = "123";
Person.prototype.getInfo = function() {
  alert(this.name+","+this.password);
};
  
var p1 = new Person();
var p2 = new Person();
p1.name = "kyle";//对象生成之后再去改变属性
p1.getInfo();
p2.getInfo();
ログイン後にコピー

单纯地使用原型方式有两个问题：第一，你无法在构造函数中为属性赋初值，只能在对象生成之后再去改变属性值。

prototype

JavaScript

function Person(){
  
}
Person.prototype.name = new Array();
Person.prototype.password = "123";
Person.prototype.getInfo = function() {
  alert(this.name+","+this.password);
};
  
var p1 = new Person();
var p2 = new Person();
p1.name.push("zhangsan");
p1.name.push("lisi");
p1.password = "456";
p1.getInfo();
p2.getInfo()
ログイン後にコピー

浏览器将会打印：zhangsan，lisi，456 和 zhangsan，lisi，123.

如果使用原型方式创建对象，那么生成的所有对象会共享原型中的属性，这样一个对象改变了该属性也会反应到其他对象当中。所以单纯地使用原型方式是不行的，还需要结合其他方式。接下来我们会继续介绍。

使用原型+构造函数方式来定义对象

JavaScript

function Person() {
  this.name = new Array();
  this.password = "123";
}
Person.prototype.getInfo = function() {
  alert(this.name+","+this.password);
};
  
var p1 = new Person();
var p2 = new Person();
p1.name.push("zhangsan");
p2.name.push("lisi");
p1.getInfo();
p2.getInfo();
ログイン後にコピー

使用原型+构造函数方式来定义对象，对象之间的属性互不干扰，各个对象间共享同一个方法，这是一种比较好的方式。

v）动态原型方式

JavaScript

function Person(){
  this.name = "zhangsan";
  this.password = "123";
  if(typeof Person.flag == "undefined"){
    alert("invoked");
    Person.prototype.getInfo = function(){
      alert(this.name + "," + this.password);
    }
    Person.flag = true;
  }   
}
  
var p1 = new Person();
var p2 = new Person();
p1.getInfo();
p2.getInfo();
ログイン後にコピー

在动态原型方式中，在构造函数中通过标志量让所有对象共享一个方法，而每个对象拥有自己的属性。上面代码在第一次创建对象时，首先通过一个判断语句，看flag属性是否已经定义，若没有定义，则通过原型方式添加getInfo方法，然后将flag设置为true，那么当第二次创建对象时，if语句判断为假，跳过执行。这样就达到了我们所期望的结果，创建的对象属性是互不干扰的，而对象的方法是共享的。

17、JavaScript中对象的继承（5种方式）

第一种方式:对象冒充

冒充对象继承

JavaScript

//父类
function Parent(username) {
  this.username = username;
  this.sayHello = function() {
    alert(this.username);
  };
}
//子类
function Child(username,password){
  //下面三行代码是最关键的
  this.method = Parent;
  this.method(username);
  delete this.method;
  
  this.password = password;
  this.sayWorld = function() {
    alert(this.password);
  };
}
  
var p = new Parent("zhangsan");
var c = new Child("lisi","123");
  
p.sayHello();
c.sayHello();
c.sayWorld()
ログイン後にコピー

第二种方式:call()

继承的第二种实现方式，call方法方式，call方法是Function对象中定义的方法，因此我们定义的每个函数都拥有该方法。call方法的第一个参数会被传递给函数中的this，从第2个参数开始，逐一赋给函数中的参数。

call 继承父类

JavaScript

function test(str) {
  alert(this.name+","+str);
}
var object = new Object();
object.name = "zhangsan";
//test.call相当于调用了test函数
test.call(object,"html5war");//将object赋给了this
ログイン後にコピー

接下来我们用call方式实现对象的继承

JavaScript

//父类
function Parent(username){
  this.username = username;
  this.sayHello = function() {
    alert(this.username);
  };
}
//子类
function Child(username,password) {
  Parent.call(this,username);
  this.password = password;
  this.sayWorld = function() {
    alert(this.password);
  };
}
  
var p = new Parent("zhangsan");
var c = new Child("lisi","123");
p.sayHello();
c.sayHello();
c.sayWorld();
ログイン後にコピー

第三种方式:apply()

apply 继承父类

JavaScript

//父类
function Parent(username){
  this.username = username;
  this.sayHello = function(){
    alert(this.username);
  };
}
//子类
function Child(username,password){
  Parent.apply(this,new Array(username));
  this.password = password;
  this.sayWorld = function(){
    alert(this.password);
  };
}
  
var p = new Parent("zhangsan");
var c = new Child("lisi","123");
p.sayHello();
c.sayHello();
c.sayWorld();
ログイン後にコピー

apply方法与call方法很类似，apply方法也是定义在Function对象中的方法，因此我们定义的每个函数都拥有该方法。

apply方法与call方法有一个区别：Parent.apply(this,new Array(username));传递的第二个参数为一个数组，而call方法传递的是一些离散的数据参数。这两个方法并不能说谁好谁坏，要看具体使用场景。

第四种方式:原型链方式（无法给构造函数传递参数）

原型链继承

JavaScript

function Parent() {
  
}
Parent.prototype.hello = "hello";
Parent.prototype.sayHello = function() {
  alert(this.hello);
};
  
function Child() {
  
}
Child.prototype = new Parent();
  
Child.prototype.world = "world";
Child.prototype.sayWorld = function() {
  alert(this.world);
};
  
var c = new Child();
  
c.sayHello();
c.sayWorld();
ログイン後にコピー

单纯使用原型链方式的缺点：没有办法传递参数，只有等对象创建完之后再去修改。我们接下来结合其它的方式解决这个问题。

第五种方式:混合方式(推荐)

使用混合方式实现对象的继承

JavaScript

function Parent(hello) {
  this.hello = hello;
}
Parent.prototype.sayHello = function() {
  alert(this.hello);
}
  
function Child(hello,world) {
  Parent.call(this,hello);
  this.world = world;
}
Child.prototype = new Parent();
Child.prototype.sayWorld = function() {
  alert(this.world);
}
  
var c = new Child("hello","world");
c.sayHello();
c.sayWorld();
ログイン後にコピー

以上这篇JavaScript基础知识点归纳(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

更多JavaScript基础知识点归纳相关文章请关注PHP中文网！

関連ラベル：
JavaScript 基础
ソース：php.cn
前の記事：JS の基本エッセイ (初心者必読) 次の記事：Javascript基礎学習メモ（初心者必読）
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
モーダルカウンター +/-カウンターを備えたモーダルを作成しようとしています。ただし、状態は基礎となるコンポーネントにあるため、モーダルはそれを認識しないと思います。それを修正する方法はありますか?そ...
から 2024-04-03 14:16:44
0
1
298
Mechanize を使用して .aspx Web サイトから GUID を抽出する POST リクエスト グローバルに一意の識別子を生成する https://www.guidgenerator.com/online-guid-generator.aspx という Web サイトがありま...
から 2024-04-02 12:43:40
0
1
420
ボタンをアクティブにするとホバー効果が誤動作する 私は Web 開発 (HTML、CSS、JS) の基礎を学ぼうとしているので、動作する Apple 電卓を作ろうとしています。小さなバグに気づくまではすべてが正常に動作していました...
から 2024-04-01 21:51:26
0
1
396
CSS + HTML を使用してテキストを中央揃えにできない CSSとHTMLを使用してテキストを中央揃えにしようとしています。私は Web 開発が初めてなので、始めたばかりです。基礎コースを視聴し（最初のページを作成しました）、現在は自分の...
から 2024-03-31 15:57:04
0
1
322
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート