JavaScript基礎知識點歸納(推薦)
來源:易賢網(wǎng) 閱讀:773 次 日期:2016-07-25 14:56:16
溫馨提示:易賢網(wǎng)小編為您整理了“JavaScript基礎知識點歸納(推薦)”,方便廣大網(wǎng)友查閱!

定義在函數(shù)外的變量一定是全局變量;定義在函數(shù)內(nèi)的變量,如果聲明了var,那該變量就是局部變量,如果不聲明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、兩種類型的Cookie

i)持久性cookie,會被存儲到客戶端的硬盤上。

ii)回話cookie:不會被存儲到客戶端的硬盤上,而是放在瀏覽器進程所處的內(nèi)存當中,當瀏覽器關閉時則該回話cookie就銷毀了。

3、在JavaScript中,函數(shù)(function)就是對象

4、在JavaScript中,沒有方法(函數(shù))重載的概念

5、Function對象

在JavaScript中有一個Function對象,所有自定義的函數(shù)都是Function對象類型的。Function對象接受的所有參數(shù)都是字符串類型的,其中最后一個參數(shù)就是要執(zhí)行的函數(shù)體,而前面的參數(shù)則是函數(shù)真正需要接受的參數(shù)。

6、隱含的對象arguments

在JavaScript中,每個函數(shù)都有一個隱含的對象arguments,表示給函數(shù)實際傳遞的參數(shù)。arguments.length就表示實際傳遞的參數(shù)的個數(shù)。

7、函數(shù)名.length

每一個函數(shù)對象都有一個length屬性,表示該函數(shù)期望接受的參數(shù)個數(shù)。它與函數(shù)的arguments不同。arguments.length表示函數(shù)實際接受的參數(shù)個數(shù)。

8、JavaScript中有五種原始數(shù)據(jù)類型

Undefined、Null、Boolean、Number以及String。(注意:在JavaScript中,沒有char數(shù)據(jù)類型)

Undefined數(shù)據(jù)類型的值只有一個:undefined;

Null數(shù)據(jù)類型的值只有一個:null;

Boolean數(shù)據(jù)類型的值有兩個:true和false;

9、typeof運算符

typeof是一元運算符,后跟變量的名稱,用于獲取變量的數(shù)據(jù)類型,其返回值有5個:undefined、boolean、number、string以及object。

10、在JavaScript中,如果函數(shù)沒有聲明返回值,那么會返回undefined11、null與undefined的關系

undefined實際上是從null派生出來的。例如:

null與undefined的關系

JavaScript

alert(undefined == null);

//瀏覽器返回true 

11、強制類型轉換

在JavaScript中有3種強制類型轉換:Boolean(value),Number(value),String(value)。

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"));

瀏覽器彈出false對話框,則說明Object對象中的屬性是不能枚舉的。

接下來我們再看看window對象中的屬性是否可以枚舉的

window對象中的屬性是可以枚舉的

JavaScript

for (var v in window) {

  console.log(v);

}

在Chrome瀏覽器中我們會看到瀏覽器調(diào)試控制臺中打印出一大堆屬性,說明window對象中的屬性是可以枚舉的。

13、在JavaScript中,可以動態(tài)添加對象的屬性,也可以動態(tài)刪除對象的屬性

動態(tài)添加/刪除對象的屬性

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屬性已經(jīng)被刪除

alert(object.username);

14、JavaScript中定義對象最常見的方式

定義對象最常見的方式

JavaScript

var object = {

  username:"zhangsan",

  password:12345

};

alert(object.username);

alert(object.password);

15、數(shù)組

數(shù)組定義

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);

調(diào)用數(shù)組的sort()方法,瀏覽器打印1,25,4,這并不是我們期望的結果。

對于JavaScript數(shù)組的sort方法來說,它會先將待排序的內(nèi)容轉換為字符串(調(diào)用toString()方法),按照字符串的先后順序進行排序。

下列方式可以得到我們期望的結果(按數(shù)組大小進行排序):

數(shù)組排序

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);

我們再用匿名函數(shù)的方式實現(xiàn):

匿名函數(shù)排序

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");//調(diào)用sayName方法,name屬性被修改為kyle,瀏覽器將打印kyle

最簡單的一種方式,使用起來并不方便,適合于臨時需要一個對象。

ii)工廠方式創(chuàng)建對象

不帶參數(shù)的工廠方法:

JavaScript

//工廠方法

function createObject() {

  var object = new Object();//創(chuàng)建一個對象

  object.name = "zhangsan";//為該對象添加一個name屬性

  object.password = "123";//為該對象添加一個password屬性

  object.get = function() {//為該對象添加一個get方法

    alert(this.name+","+this.password);

  };

  return object;//返回該對象

}

var object1 = createObject();//調(diào)用createObject工廠方法創(chuàng)建對象object1

var object2 = createObject();//調(diào)用createObject工廠方法創(chuàng)建對象object2

object1.get();//調(diào)用對象get方法

object2.get();//調(diào)用對象get方法

帶參數(shù)的工廠方法:

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();

上面兩種不帶參數(shù)和帶參數(shù)的工廠方法缺點:

每創(chuàng)建一個對象,內(nèi)存中就創(chuàng)建一個get方法,比較浪費內(nèi)存,且影響性能。而我們的期望是,創(chuàng)建兩個不同的對象,它們的屬性是不一樣的,但方法是共用的。所以接下來我們需要改進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函數(shù)外面,這樣每創(chuàng)建一個對象,get方法都是共用的。讓一個函數(shù)對象被多個對象所共享,而不是每一個對象都擁有一個函數(shù)對象。

iii)構造函數(shù)方式創(chuàng)建對象

不帶參數(shù)的構造函數(shù):

JavaScript

function Person(){

  //在執(zhí)行第一行代碼前,js引擎會為我們生成一個對象

  this.name = "zhangsan";

  this.password = "123";

  this.getInfo = function() {

    alert(this.name+","+this.password);

  };

  //此處有一個隱含的return語句,用于將之前生成的對象返回(也是跟工廠方式不一樣的地方)

}

var p1 = new Person();

p1.getInfo();

帶參數(shù)的構造函數(shù)

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)方式創(chuàng)建對象

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();

單純地使用原型方式有兩個問題:第一,你無法在構造函數(shù)中為屬性賦初值,只能在對象生成之后再去改變屬性值。

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()

瀏覽器將會打?。簔hangsan,lisi,456 和 zhangsan,lisi,123.

如果使用原型方式創(chuàng)建對象,那么生成的所有對象會共享原型中的屬性,這樣一個對象改變了該屬性也會反應到其他對象當中。所以單純地使用原型方式是不行的,還需要結合其他方式。接下來我們會繼續(xù)介紹。

使用原型+構造函數(shù)方式來定義對象

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();

使用原型+構造函數(shù)方式來定義對象,對象之間的屬性互不干擾,各個對象間共享同一個方法,這是一種比較好的方式。

v)動態(tài)原型方式

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();

在動態(tài)原型方式中,在構造函數(shù)中通過標志量讓所有對象共享一個方法,而每個對象擁有自己的屬性。上面代碼在第一次創(chuàng)建對象時,首先通過一個判斷語句,看flag屬性是否已經(jīng)定義,若沒有定義,則通過原型方式添加getInfo方法,然后將flag設置為true,那么當?shù)诙蝿?chuàng)建對象時,if語句判斷為假,跳過執(zhí)行。這樣就達到了我們所期望的結果,創(chuàng)建的對象屬性是互不干擾的,而對象的方法是共享的。

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()

繼承的第二種實現(xiàn)方式,call方法方式,call方法是Function對象中定義的方法,因此我們定義的每個函數(shù)都擁有該方法。call方法的第一個參數(shù)會被傳遞給函數(shù)中的this,從第2個參數(shù)開始,逐一賦給函數(shù)中的參數(shù)。

call 繼承父類

JavaScript

function test(str) {

  alert(this.name+","+str);

}

var object = new Object();

object.name = "zhangsan";

//test.call相當于調(diào)用了test函數(shù)

test.call(object,"html5war");//將object賦給了this

接下來我們用call方式實現(xiàn)對象的繼承

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對象中的方法,因此我們定義的每個函數(shù)都擁有該方法。

apply方法與call方法有一個區(qū)別:Parent.apply(this,new Array(username));傳遞的第二個參數(shù)為一個數(shù)組,而call方法傳遞的是一些離散的數(shù)據(jù)參數(shù)。這兩個方法并不能說誰好誰壞,要看具體使用場景。

第四種方式:原型鏈方式(無法給構造函數(shù)傳遞參數(shù))

原型鏈繼承

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();

單純使用原型鏈方式的缺點:沒有辦法傳遞參數(shù),只有等對象創(chuàng)建完之后再去修改。我們接下來結合其它的方式解決這個問題。

第五種方式:混合方式(推薦)

使用混合方式實現(xiàn)對象的繼承

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基礎知識點歸納(推薦)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考

更多信息請查看網(wǎng)絡編程
易賢網(wǎng)手機網(wǎng)站地址:JavaScript基礎知識點歸納(推薦)

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網(wǎng)