JavaScriptの基礎知識を解説

この記事は、JavaScript の初心者、またはフロントエンドをしばらく勉強したものの、js の明確な概念がわからない学生に適しています~~。

学習の目的

この記事は、JavaScriptの基礎が弱い学生を対象に、JavaScriptについての理解を深めることを目的としています。

この記事では、JavaScript を話し始める際の初心者向けの次の落とし穴について説明します (一部はほとんどの言語で利用可能です)。内容は次のとおりです:

1. i++

3. パッケージ化オブジェクト

4. 参照型

5. && および || はリテラルに適用されますが、参照型には適用されません。

// 字面量连等得到想要的结果
var a,b;
a = b = 2;
a // 2
b // 2
// 引用类型连等不可预测
var arr1, arr2;
arr1 = arr2 = []
arr1[0] = 10
arr2[0] // 10
//引用类型连等使得两个引用指向一个对象，操作其中一个，两个值都变

上記のコードは、2 つの変数を同時に同じ値に代入する必要がある場合があります。ただし、それらが参照型の場合、連続して代入することはできません。

さらに、連続代入には大きな抜け穴があります。それは、変数がグローバル世界にリークされていないということですが、次のコードを見てください:

function fn (num) {
 var a = b = num;
 a // num
 b // num
}
fn(10)
a // 报错
b // 10
// 我们并不没有定义全局变量b

。 fn 関数を実行しました。最後に b 変数がグローバル スコープに表示されます。これはなぜでしょうか。var a = b = num という文を見てください。この文は 2 つの文に分けることができます

var a
a = b = num
//只声明了a

実際には a 変数を宣言しただけです。 、さらには b 宣言がないため、b がグローバル ウィンドウ オブジェクトにハングされ、変数がグローバル世界に漏洩することがわかります。

初心者

上記は単なる例です。次に、より複雑な例を見てみましょう

var a = {x: 1}
var b = a
a.x = a = {y: 1}
a.x // undefined
b.x // {y: 1}

この例は、一見するとわかりにくいように見えますが、理解するのは難しくありません。全て。 。

1. a と b はどちらもオブジェクト {x: 1} を指します

2. a.x は元のオブジェクトの x 属性を指し、a は参照変数です

3. : 1} 参照変数 a のポインタを別のオブジェクト {y: 1}

4 にポイントするだけです。a.x = a、前者は依然として元のオブジェクトの x 属性を表します。これは、によって参照されるオブジェクトの x 属性です。 b

5. 課題が完了しました。

まだ理解していないかもしれませんが、心配しないでください。明確に理解できるように、以下で JavaScript エンジンを詳しく説明します

庖丁解牛

エンジンの動作原理: エンジンが JavaScript を解析するとき式を実行すると、LHS クエリと RHS クエリが実行されます (詳細については、「よくわからない Javascript」を参照してください)。私はそれらを LHS (代入) と RHS (検索) として理解しています。

それでは、上記の例を使用してエンジンのワークフローを示してみましょう

var a = {x: 1}
// 引擎：我将要对a变量LHS（赋值），内容是{x: 1}
// 作用域： 刚声明了a变量，给你。
var b = a
// 引擎： 我将要对a变量RHS（查找）
// 作用域： 你刚刚给它LHS了，给你吧
// 引擎： 我将要对b变量LHS（赋值），内容为a变量指向的对象
// 作用域：刚声明了b变量，给你。
a.x = a = {y: 1}
// 引擎：我将要对a进行LHS(赋值)，内容是另一个对象{y：1}
// 作用域：可以，给你，但好像还有其他命令，先不要赋值。
// 引擎： 是的，下一步我还需要对a.x 进行LHS（赋值），内容是将要改变的a变量
// 作用域： 可以，a变量指向的对象有x属性，不过马上a就改变了，不过没关系，b变量也指向那个对象，赋值完后，你可以用b变量引用旧对象。
// 引擎：了解了，我先把a变量赋值为一个新的对象，然后把原来的a变量指向的对象的x属性赋值为 新a。
a.x // undefined
// 引擎： 我需要拿到a变量指向的对象的x属性
// 作用域： 你刚刚改变了a的指向，现在的a指向的对象已经没有x属性了
b.x // {y: 1}
// 引擎： 我需要拿到b变量指向的对象的x属性
// 作用域： 你是想拿到你旧对象的x属性吧，给你，不过已经被你在之前改变了值，现在b.x的值就是a指向的新对象的值。

2. ++ 演算子

++ 演算子は、誰もが最もよく使用するものですが、実際には、それほど奇妙ではありませんが、適切です。あなたは本当に彼のことを知っていますか？

var a = 1;
var b = a++
a // 2
b // 1
var c = 1;
var d = ++ c;
c // 2
d // 2

Pre++ と post++、1 つは式がインクリメントされた後の値を返すこと、もう 1 つは式がインクリメントされる前の値を返すことです。 2 つを分解してプロセスを見てみましょう。

b = a++
// 等价于 ...
b = a
a = a + 1
//.........................
b = ++ a
// 等价于 ...
a = a + 1
b = a

これは単純に操作の順序の問題です。これはわかりやすいかもしれませんが、次のような落とし穴もあります。

数日前、誰かが「1++ とは何ですか?」と質問しました。答え: 2

多くの人の最初の反応は 2 であると推定されていますが、これは完全に間違いです。では、なぜ 2 に等しくないのでしょうか? 実際、1++ はエラーを報告し、正当な式ではありません:

1 ++
// 等价于
1 = 1 + 1
// 引擎对 1 进行LHS（赋值），作用域发现他是非法变量，所以会报错 左值无效。

3. 文字列を使用して長さを取得する場合は、メソッドを使用します。リテラル値は単なる値であるのに、なぜオブジェクトでのみ使用できるのではないか?確かにオブジェクトは存在するだけですが、式が実行されるとパッケージ化オブジェクトが生成されます。もしかしたら、この知識ポイントを読んだことがあるかもしれませんので、読み飛ばしても構いません。

var str = 'hello'
str.length // 5
str.aaa = 5
str.aaa // undefined

str 文字列を定義し、長さ 5 を取得しますが、属性 aaa を自分で追加しますが、これを取得できません。これは、パッケージング オブジェクトの宣言サイクルによって解決する必要があります。パッケージング オブジェクトの宣言サイクルは存在するだけです。

var str = 'hello'
str.length
// 等价于
new String(str).length
str.aaa = 5
//等价于
new String(str).aaa = 5
str.aaa
// 等价于
new String(str).aaa

つまり、str 属性が使用されるたびに、操作が完了した後、オブジェクトが解放されることがわかります。 aaa は別のオブジェクトであるため、2 回目では aaa 属性が取得されます。理解できない場合は、Baidu で js パッケージング オブジェクトを検索すると詳細な回答が得られます。

4. 参照型

ほとんどの言語には参照型があり、これは実際にはオブジェクト変数です。 C 言語では、参照型をポインタとして理解します。このポインタは、コードを変更すると、それに応じてメモリの一部を指します。 jsも同様です。

コードを書くときは、参照型変数とリテラル変数の違いを覚えておく必要があります。それらには異なる用途があります。

var global = new Object()
function setColor (obj) {
 obj.color = 'blue'
 obj = new Object()
 obj.color = 'red'
}
setColor(global)
global.color // blue

これは、「JavaScript 高度なプログラミング」の例です。setColor 関数にオブジェクト グローバルを渡し、内部で上記の操作を実行します。global.color が青であることを出力します。なぜ赤ではないのでしょうか。参照型の結果は次のとおりです。

1. グローバル変数は参照型であり、オブジェクトを指します。

2. setColor 関数に渡され、obj は globalObj と呼ばれます。3. 色を割り当てます。 globalObj の属性を青い文字列として、global.color を blue

4 にします。obj を別の新しいオブジェクト localObj にポイントし、obj を global から切断します。

5. localObj.color を「red」に割り当てます

可以看出，我们并没有对global对象的color进行'red'赋值，'red'赋值给了另一个对象的color属性。

结论：引用类型传递是将两个变量指向同一个对象，而字面量的传递仅仅是值的赋值传递。我们可以将引用类型传递到函数进行改变，不可以在函数内改变传递进来的字面值。

5. && 与 ||

两者的基本运用相信大家都了解，大部分用来if判断，如：

var a = 2;
var b = false
if (a && b) {
 
 alert('best')
}
if (a || b) {
 alret('good')  // 运行
}

他们的用法不局限于判断 左右两边的 && 和 || 关系，还可以用来提供代码的质量

var obj = {}
if (obj.info.user === 'xu') { // terrible
 // ..
}
if (obj.info && obj.info.user === 'xu' ) { // good
 // ...
}

如果仅仅判断obj.info.user 会报错造成程序终止，但是下面那样判断就大使得代码健壮，不会那么容易崩溃。

重点： && 和 || 并不会返回true和false，他会返回终止此表达式的那个变量值。

true && 6 // 6
NaN && false // NaN
'0' || 6 // '0'
false || true // true
false || 0 && 1 // 0
false || 1 && 0 // 0

&&和||， &&优先级大于||。

&&操作符，如果左边为假，返回左边值，否则，始终返回右边值

||操作符，如果左边为真，返回左边值， 否则，始终返回右边值。

结尾

javascript基础本章简单的介绍在这里，内容并不全面，还请多多见谅。如有错误，请指出。。。。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持PHP中文网！

更多javascript基础知识讲解相关文章请关注PHP中文网！