JavaScript에서 흔히 저지르는 실수 10가지, 여러분은 몇 번이나 저지르셨나요?
- 黄舟원래의
- 2017-02-24 13:48:261288검색
서문
오늘날 JavaScript는 웹 편집의 핵심이 되었습니다. 특히 지난 몇 년 동안 인터넷에서는 SPA 개발, 그래픽 처리, 상호 작용 등 분야에서 수많은 JS 라이브러리가 등장하는 것을 목격했습니다.
처음 다루신다면 많은 사람들이 js가 매우 간단하다고 생각할 것입니다. 실제로 숙련된 많은 엔지니어는 물론 초보자라도 기본 js 기능을 구현하는 데 거의 장애물이 없습니다. 하지만 JS의 실제 기능은 많은 사람들이 상상하는 것보다 더 다양하고 복잡합니다. JavaScript에 대한 많은 세부 규정으로 인해 웹 페이지에 예상치 못한 버그가 많이 나타날 수 있습니다. 이러한 버그를 이해하는 것은 숙련된 JS 개발자가 되는 데 매우 중요합니다.
일반적인 실수 1: 이 키워드에 대한 잘못된 참조
코미디언이 다음과 같이 말하는 것을 들은 적이 있습니다.
"나는 여기 가본 적도 없고 여기가 어딘지 모르니까 거기가 아닌 다른 곳인 걸까요?"
이 문장은 js 개발에서 다소간 은유적인 표현입니다. 개발자들은 이 키워드의 사용에 대해 오해를 하고 있습니다. 이것은 무엇을 가리키는가? 일상 영어에서도 이와 같은 의미를 갖고 있나요?
Game.prototype.restart = function () { this.clearLocalStorage();
this.timer = setTimeout(function(){ this.clearBoard(); }, 0);
};
위 코드를 실행하면 다음 오류가 발생합니다.
Uncaught TypeError: undefined is not a function
왜 그럴까요? 이에 대한 호출은 그것이 위치한 환경과 밀접한 관련이 있습니다. 위 오류가 발생하는 이유는 setTimeout() 함수를 호출하면 실제로는 window.setTimeout()을 호출하기 때문입니다. 따라서 setTimeout()에 정의된 함수는 실제로는 window 컨텍스트에 정의되어 있지 않습니다. ) 창의 함수 메서드.
아래에는 두 가지 솔루션이 제공됩니다. 상대적으로 간단하고 직접적인 첫 번째 방법은 이를 다른 환경 배경에서 상속할 수 있도록 변수에 저장하는 것입니다.
Game.prototype.restart = function () { this.clearLocalStorage();
var self = this;
this.timer = setTimeout(function(){ self.clearBoard();}, 0); };두 번째 방법은 바인딩() 메서드를 사용하는 것이지만 이는 이전보다 더 복잡합니다. 이전 것.bind()에 익숙하지 않은 학생의 경우 Microsoft 공식 웹사이트(위의 http://www.php.cn/
Game.prototype.restart = function () { this.clearLocalStorage();
this.timer = setTimeout(this.reset.bind(this), 0); };
Game.prototype.reset = function(){ this.clearBoard();};)에서 사용법을 확인할 수 있습니다. 이 예에서는 둘 다 다음을 참조합니다. 게임.프로토타입.
흔한 실수 2: 기존 프로그래밍 언어의 생명주기에 대한 오해
또 범하기 쉬운 실수는 JS에도 생명주기가 있다고 생각하는 것입니다. 프로그래밍 언어라고 말해보세요. 다음 코드를 살펴보세요:
for (var i = 0; i < 10; i++) { /* ... */ } console.log(i);console.log()를 실행할 때 정의되지 않은 오류가 반드시 보고될 것이라고 생각했다면 완전히 틀린 생각입니다. 실제로는 10을 반환한다고 말씀드리겠습니다.
물론 다른 많은 언어에서는 이러한 코드를 만나면 반드시 오류가 보고됩니다. 왜냐하면 나는 분명히 수명주기를 초과했기 때문입니다. for에 정의된 변수의 수명은 루프가 끝난 후에 끝납니다. 하지만 js에서는 i의 삶은 계속될 것입니다. 이러한 현상을 가변 호이스팅이라고 합니다.
그리고 다른 언어처럼 특정 논리 모듈에서 수명주기가 있는 변수를 구현하려면 let 키워드를 사용할 수 있습니다.
흔한 실수 3: 메모리 누수
메모리 누수는 js 프로그래밍에서 거의 피할 수 없는 문제입니다. 특별히 주의하지 않으면 최종 검사 과정에서 다양한 메모리 누수가 반드시 발생하게 됩니다. 아래 예를 들어보겠습니다.
var theThing = null;
var replaceThing = function () {
var priorThing = theThing;
var unused = function () {
if (priorThing) { console.log("hi"); }
};
theThing = { longStr: new Array(1000000).join('*'), //
someMethod: function () { console.log(someMessage); }
};
};
setInterval(replaceThing, 1000);위의 코드를 실행하면 분명히 GC(가비지 수집기)에만 의존하여 초당 1M의 메모리 누수가 발생하는 대량의 메모리 누수가 발생한 것을 알 수 있습니다. 더 이상 당신을 도울 수 없습니다. 위의 코드를 보면, replacementThing이 호출될 때마다 longstr이 재활용되지 않는 것으로 보입니다. 왜 이런가요?
각 theThing 구조에는 longstr 구조 목록이 포함되어 있습니다. 매초마다 replacementThing을 호출하면 현재 포인터가 PriorityThing에 전달됩니다. 그러나 PriorityThing은 새 할당을 수락하기 전에 항상 마지막 함수의 포인터를 먼저 차단 해제하므로 문제가 없음을 알 수 있습니다. 그리고 이 모든 것은 교체 함수 본문에서 발생합니다. 상식적으로 함수 본문이 끝나면 함수의 지역 변수도 GC에 의해 재활용되므로 메모리 누수 문제가 발생하지 않습니다. 위의 오류?
에서 확인할 수 있습니다. 일반적인 실수 4: 비교 연산자
JavaScript에서 가장 편리한 위치 중 하나는 다음과 같습니다. 비교 연산의 결과 변수를 강제로 부울 유형으로 변환할 수 있습니다. 하지만 다른 관점에서 보면 때로는 많은 불편을 초래할 수도 있습니다. 다음 예는 많은 프로그래머를 괴롭히는 몇 가지 코드 예입니다.
console.log(false == '0');
console.log(null == undefined);
console.log(" \t\r\n" == 0);
console.log('' == 0); // And these do too!
if ({}) // ...
if ([]) // ...最后两行的代码虽然条件判断为空（经常会被人误认为转化为false），但是其实不管是{ }还是[ ]都是一个实体类，而任何的类其实都会转化为true。就像这些例子所展示的那样，其实有些类型强制转化非常模糊。因此很多时候我们更愿意用 === 和 !== 来替代== 和 !=， 以此来避免发生强制类型转化。. ===和!== 的用法和之前的== 和 != 一样，只不过他们不会发生类型强制转换。另外需要注意的一点是，当任何值与 NaN 比较的时候，甚至包括他自己，结果都是false。因此我们不能用简单的比较字符来决定一个值是否为 NaN 。我们可以用内置的 isNaN() 函数来辨别:
console.log(NaN == NaN); // false console.log(NaN === NaN); // false console.log(isNaN(NaN)); // true
常见错误五：低效的DOM操作
js中的DOM基本操作非常简单，但是如何能有效地进行这些操作一直是一个难题。这其中最典型的问题便是批量增加DOM元素。增加一个DOM元素是一步花费很大的操作。而批量增加对系统的花销更是不菲。一个比较好的批量增加的办法便是使用 document fragments ：
var p = document.getElementsByTagName("my_p");
var fragment = document.createDocumentFragment();
for (var e = 0; e < elems.length; e++) { fragment.appendChild(elems[e]); } p.appendChild(fragment.cloneNode(true));直接添加DOM元素是一个非常昂贵的操作。但是如果是先把要添加的元素全部创建出来，再把它们全部添加上去就会高效很多。
常见错误6:在for循环中的不正确函数调用
请大家看以下代码：
var elements = document.getElementsByTagName('input');
var n = elements.length;
for (var i = 0; i < n; i++) {
elements[i].onclick = function() {
console.log("This is element #" + i); }; }运行以上代码，如果页面上有10个按钮的话，点击每一个按钮都会弹出 “This is element #10”! 。这和我们原先预期的并不一样。这是因为当点击事件被触发的时候，for循环早已执行完毕，i的值也已经从0变成了。
我们可以通过下面这段代码来实现真正正确的效果：
var elements = document.getElementsByTagName('input');
var n = elements.length;
var makeHandler = function(num) { // outer function
return function() {
console.log("This is element #" + num); }; };
for (var i = 0; i < n; i++)
{ elements[i].onclick = makeHandler(i+1); }在这个版本的代码中， makeHandler 在每回循环的时候都会被立即执行，把i＋1传递给变量num。外面的函数返回里面的函数，而点击事件函数便被设置为里面的函数。这样每个触发函数就都能够是用正确的i值了。
常见错误7:原型继承问题
很大一部分的js开发者都不能完全掌握原型的继承问题。下面具一个例子来说明：
BaseObject = function(name) {
if(typeof name !== "undefined")
{ this.name = name; }
else
{ this.name = 'default' } };这段代码看起来很简单。如果你有name值，则使用它。如果没有，则使用 ‘default’:
var firstObj = new BaseObject(); var secondObj = new BaseObject('unique'); console.log(firstObj.name); // -> 结果是'default' console.log(secondObj.name); // -> 结果是 'unique'
但是如果我们执行delete语句呢:
delete secondObj.name;
我们会得到:
console.log(secondObj.name); // -> 结果是 'undefined'
但是如果能够重新回到 ‘default’状态不是更好么? 其实要想达到这样的效果很简单，如果我们能够使用原型继承的话:
BaseObject = function (name)
{ if(typeof name !== "undefined")
{ this.name = name; } };
BaseObject.prototype.name = 'default';在这个版本中, BaseObject 继承了原型中的name 属性, 被设置为了 'default'.。这时，如果构造函数被调用时没有参数，则会自动设置为 default。相同地，如果name 属性被从BaseObject移出，系统将会自动寻找原型链，并且获得 'default'值：
var thirdObj = new BaseObject('unique'); console.log(thirdObj.name); delete thirdObj.name; console.log(thirdObj.name); // -> 结果是 'default'
常见错误8:为实例方法创建错误的指引
我们来看下面一段代码:
var MyObject = function() {}
MyObject.prototype.whoAmI = function() {
console.log(this === window ? "window" : "MyObj"); };
var obj = new MyObject();现在为了方便起见，我们新建一个变量来指引 whoAmI 方法, 因此我们可以直接用 whoAmI() 而不是更长的obj.whoAmI():
var whoAmI = obj.whoAmI;
接下来为了确保一切都如我们所预测的进行，我们可以将 whoAmI 打印出来:
console.log(whoAmI);
结果是：
function () { console.log(this === window ? "window" : "MyObj"); }没有错误！
但是现在我们来查看一下两种引用的方法：
obj.whoAmI(); // 输出 "MyObj" (as expected) whoAmI(); // 输出 "window" (uh-oh!)
哪里出错了呢？
原理其实和上面的第二个常见错误一样，当我们执行 var whoAmI = obj.whoAmI;的时候，新的变量 whoAmI 是在全局环境下定义的。因此它的this 是指window, 而不是obj！
正确的编码方式应该是：
var MyObject = function() {}
MyObject.prototype.whoAmI = function() {
console.log(this === window ? "window" : "MyObj"); };
var obj = new MyObject();
obj.w = obj.whoAmI; // still in the obj namespace obj.whoAmI(); // 输出 "MyObj" (as expected)
obj.w(); // 输出 "MyObj" (as expected)常见错误9:用字符串作为setTimeout 或者 setInterval的第一个参数
首先我们要声明，用字符串作为这两个函数的第一个参数并没有什么语法上的错误。但是其实这是一个非常低效的做法。因为从系统的角度来说，当你用字符串的时候，它会被传进构造函数，并且重新调用另一个函数。这样会拖慢程序的进度。
setInterval("logTime()", 1000);
setTimeout("logMessage('" + msgValue + "')", 1000);另一种方法是直接将函数作为参数传递进去：
setInterval(logTime, 1000);
setTimeout(function() {
logMessage(msgValue); }, 1000);常见错误10:忽略 “strict mode”的作用
“strict mode” 是一种更加严格的代码检查机制，并且会让你的代码更加安全。当然，不选择这个模式并不意味着是一个错误，但是使用这个模式可以确保你的代码更加准确无误。
下面我们总结几条“strict mode”的优势：
1. 디버깅을 더 쉽게 만듭니다. 일반 모드에서는 많은 오류가 무시됩니다. "엄격 모드" 모드는 디버깅을 더욱 엄격하게 만듭니다.
2. 기본 전역 변수 방지: 일반 모드에서 선언된 변수에 이름을 지정하면 해당 변수가 자동으로 전역 변수로 설정됩니다. 엄격 모드에서는 이 기본 메커니즘을 취소합니다.
3. this의 기본 변환 취소: 일반 모드에서 this 키워드를 null 또는 undef로 지정하면 자동으로 전역으로 변환됩니다. 엄격 모드에서는 이 기본 메커니즘을 취소합니다.
4. 중복 변수 선언 및 매개변수 선언 방지: 엄격 모드에서 중복 변수 선언은 오류가 발생합니다(예: var object = {foo: "bar", foo: "baz" }; ) 동시에 (예: function foo(val1, val2, val1){}),
과 같이 함수 선언에서 동일한 매개변수 이름이 재사용되면 오류가 보고됩니다. 5. Make eval() 함수가 더 안전합니다.
6. 유효하지 않은 삭제 명령이 발생하면 나중에 오류가 보고됩니다. 클래스에 존재하지 않는 속성에 대해서는 삭제 명령을 실행할 수 없습니다. 일반적인 상황에서는 이 상황이 조용히 무시됩니다. 엄격 모드에서는 오류가 보고됩니다.
결론
다른 기술 언어와 마찬가지로 JavaScript가 어떻게 작동하고 왜 작동하는지 더 잘 이해할수록 언어를 능숙하게 사용할 수 있습니다. 반대로 JS 패턴에 대한 지식이 부족하면 문제가 많이 발생하게 됩니다. JS의 몇 가지 자세한 구문이나 기능을 이해하면 프로그래밍 효율성을 높이고 프로그래밍 중에 직면하는 문제를 줄이는 데 도움이 됩니다.
위 내용은 JavaScript에서 흔히 발생하는 10가지 실수입니다. 얼마나 많은 실수를 해보셨나요? 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!