Javascript 修仙指南

在前端技術的世界里，除了HTML、CSS以外，還有一門非常重要的語言，那就是Javascript。如果你是一名前端工程師，那么你一定需要深入學習Javascript。但是僅僅掌握基本語法和常用庫是遠遠不夠的，今天我們來談一談如何在Javascript中修仙。

第一層：閉包知識

var count = 0;
function test() {
var num = count;
setTimeout(function(){
alert(num);
}, 1000);
count++;
}
test(); //彈出0
test(); //彈出1
test(); //彈出2

當您運行上面的代碼時，輸出的結果不是您想象的3個0。這是因為setTimeout函數(shù)中的匿名函數(shù)形成了閉包，num在內部函數(shù)中保留了其最初的值。

第二層：作用域知識

var a = 10;
function test() {
var a;
alert(a);
a = 5;
alert(a);
}
test(); //輸出undefined和5

當變量a既被聲明在函數(shù)中，也被聲明在全局中時，函數(shù)中的a將會覆蓋全局中的a。輸出結果如上。

第三層：原型鏈知識

function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayName = function() {
alert(this.name);
}
function Student(name, age, school) {
Person.call(this, name, age);
this.school = school;
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
var student1 = new Student("張三", 18, "清華大學");
student1.sayName(); //張三

在上面的代碼中，我們使用構造函數(shù)、原型鏈的繼承方式創(chuàng)建了一個Student對象，并能夠正確地引用Person對象中的成員方法。

第四層：異步Promise知識

function asyncFunction() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('async finish!');
}, 1000);
});
}
asyncFunction().then(alert); // 1秒后輸出'async finish!'

當我們使用asyncFunction()函數(shù)時，它返回一個異步Promise對象，可以使用then方法鏈式調用。使用Promise非常方便地處理異步任務。

以上就是Javascript修仙的四大層次，掌握了這些知識，您將會成為一名優(yōu)秀的前端工程師。