자바스크립트 기초지식 설명

이 글은 JavaScript 초보자나 한동안 프론트엔드를 공부했지만 JS에 대한 명확한 개념이 없는 학생에게 적합합니다~~.

학습 목적

이 글은 JavaScript 기초가 약한 학생들을 대상으로 JavaScript에 대한 이해를 깊게 하기 위한 것입니다.

이 글에서는 JavaScript를 시작하는 초보자를 위한 다음과 같은 함정에 대해 설명합니다(일부는 대부분의 언어에서 일반적입니다).

설명 내용은 다음과 같습니다.

1. 대기

2. i++

3. 패키징 객체

4. 참조 유형

5. >설명 부분

1. Etc.

사용해 보세요

Etc는 일반적인 표현이지만 모든 상황에 적합한 것은 아닙니다. 리터럴이 아닌 리터럴에 적용됩니다.

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

위의 코드는 때때로 우리는 동시에 하나의 값으로 할당해야합니다. 연속으로 할당됩니다.

<<> 또한 연속 할당에 큰 허점이 있습니다. 이는 변수가 전 세계 세계에 누출되지 않았지만 다음 코드를 살펴 보겠습니다. >

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

예, FN 함수를 실행 한 후에는 Global Scope var a = b = num이 나타납니다. > 실제로, 우리는 변수 만 선언했으며 연속 B는 이로부터 선언되지 않았으며, B가 글로벌 윈도우 객체에 매달려 변수가 글로벌 세계로 누출되었다는 것을 알 수 있습니다.

<<> 위의 예는 단순한 예입니다 , 불분명해 보이지만 전혀 이해하기 어렵지 않습니다.

1. a와 b는 모두 객체 {x: 1}을 가리키는 유형을 참조합니다.

2. a.x는 원래 객체의 x 속성을 참조하고, a는 참조 변수입니다.

<<> 3. 객체의 x 속성, 즉 b가 참조하는 객체의 x 속성

5 할당이 완료됩니다.

아직 이해하지 못하셨을 수도 있으니 걱정하지 마세요. 아래에서 자바스크립트 엔진을 분석하여 명확하게 이해할 수 있도록 하겠습니다.

庖丁解牛

엔진 작동 원리: 엔진이 구문 분석 중입니다. JavaScript 표현식을 사용하면 LHS 쿼리와 RHS 쿼리가 수행됩니다(자세한 내용은 "당신이 모르는 자바스크립트" 참조). LHS(할당) 및 RHS(검색)로 이해합니다. .

다음으로 위의 예를 바탕으로 엔진의 작업 흐름을 살펴보겠습니다.

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

2.++ 연산자

++ 연산자는 모든 사람이 가장 일반적으로 사용합니다. 사실 별로 이상한 점은 없지만, 초보자 입장에서는 그 사람을 정말 이해하고 있나요?

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

++ 이전과 ++ 이후에는 하나는 표현식이 증가한 후의 값을 반환하는 것이고, 다른 하나는 표현식이 증가하기 전의 값을 반환하는 것입니다. 우리는 두 가지를 나누어서 그 과정을 살펴볼 수 있습니다.

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指向的新对象的值。

이는 단지 연산 순서의 문제일 뿐입니다. 이해하기 쉽지만 다음과 같은 함정도 있습니다.

며칠 전 한 사람이 질문했습니다. 1++이 무엇인가요? 정답: 2

많은 분들의 첫 반응이 2인 것 같은데, 이건 완전 틀렸어요! 그렇다면 왜 2가 아닌가? 사실 1++은 오류를 보고하며 올바른 표현이 아닙니다. 그 이유는 다음과 같습니다.

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

3. 길이를 얻기 위해 문자열을 사용하는 경우, 메소드 가로채기 및 기타 동작을 사용할 때 리터럴 값은 단지 값일 뿐인데 왜 메소드 속성이 있는 것이 아닌가? 객체만 존재하는 것은 사실이지만 표현식이 실행되면 패키징 객체가 생성됩니다. 어쩌면 당신은 이 지식 포인트를 읽었고 건너뛸 수도 있습니다.

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

우리는 str 문자열을 정의하고 5의 길이를 얻지 만, 우리는 자체적으로 속성을 추가하고 포장 객체의 선언주기에 의해 해결 될 수 없습니다. 패키징 객체는 표현식의

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

에만 존재합니다. 즉, str 속성을 사용할 때마다 먼저 String 객체로 패키징되어 해당 객체가 해제될 수 있습니다. 위의 두 str.aaa는 서로 다른 객체이므로 두 번째로 얻은 aaa 속성은 없습니다. 이해가 되지 않으면 Baidu에서 js 패키징 개체를 검색하여 자세한 답변을 얻을 수 있습니다.

4. 참조 유형

대부분의 언어에는 실제로 객체 변수인 참조 유형이 있습니다. C 언어에서는 참조 유형을 포인터로 이해합니다. 이 포인터는 코드 변경을 통해 동적으로 포인터의 포인팅이 변경됩니다. js도 마찬가지입니다.

코드를 작성할 때 참조 유형 변수와 리터럴 변수의 차이점을 기억해야 합니다.

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

이것은 "Javascript Advanced 프로그래밍"의 예입니다. setColor 함수에 전역 개체를 전달하고 위 작업을 내부적으로 수행합니다. global.color가 파란색인데 왜 빨간색이 아닌가? 참조 유형의 결과는 다음과 같습니다.

<<> 1은 객체를 가리키는 기준 유형입니다. globalObj로)

3. globalObj에 파란색 문자열로 색상 속성을 할당하면 global.color는 파란색이 됩니다.

4. obj가 다른 새 개체 localObj를 가리키도록 하여 obj와 연결을 끊습니다. 글로벌.

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中文网！