JavaScript基礎(chǔ)知識(shí)點(diǎn)歸納(推薦)

更新時(shí)間：2016年07月09日 10:53:28 投稿：jingxian

下面小編就為大家?guī)硪黄狫avaScript基礎(chǔ)知識(shí)點(diǎn)歸納(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

定義在函數(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，會(huì)被存儲(chǔ)到客戶端的硬盤上。

ii）回話cookie：不會(huì)被存儲(chǔ)到客戶端的硬盤上，而是放在瀏覽器進(jìn)程所處的內(nèi)存當(dāng)中，當(dāng)瀏覽器關(guān)閉時(shí)則該回話cookie就銷毀了。

3、在JavaScript中，函數(shù)（function）就是對(duì)象

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

5、Function對(duì)象

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

6、隱含的對(duì)象arguments

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

7、函數(shù)名.length

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

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

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

Undefined數(shù)據(jù)類型的值只有一個(gè)：undefined；

Null數(shù)據(jù)類型的值只有一個(gè)：null；

Boolean數(shù)據(jù)類型的值有兩個(gè)：true和false；

9、typeof運(yùn)算符

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

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

undefined實(shí)際上是從null派生出來的。例如：

null與undefined的關(guān)系

JavaScript

 alert(undefined == null);
//瀏覽器返回true

11、強(qiáng)制類型轉(zhuǎn)換

在JavaScript中有3種強(qiáng)制類型轉(zhuǎn)換：Boolean（value），Number（value），String（value）。

12、Object對(duì)象

在JavaScript中，所有對(duì)象都是從Object對(duì)象繼承過來的。

Object對(duì)象

JavaScript

var object = new Object();
for(var v in object){
  alert(v);
}

上面的代碼中，瀏覽器并沒有打印出什么，并不能說明Object對(duì)象不帶有任何屬性。下面代碼測(cè)試Object對(duì)象中的屬性是否可以枚舉，如果返回false，則說明Object對(duì)象中的屬性是不能枚舉的。

Object對(duì)象中的屬性是不能枚舉的

JavaScript

alert(object.propertyIsEnumerable("prototype"));

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

接下來我們?cè)倏纯磜indow對(duì)象中的屬性是否可以枚舉的

window對(duì)象中的屬性是可以枚舉的

JavaScript

for (var v in window) {
  console.log(v);
}

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

13、在JavaScript中，可以動(dòng)態(tài)添加對(duì)象的屬性，也可以動(dòng)態(tài)刪除對(duì)象的屬性

動(dòng)態(tài)添加/刪除對(duì)象的屬性

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;//此時(shí)，username屬性已經(jīng)被刪除
alert(object.username);

14、JavaScript中定義對(duì)象最常見的方式

定義對(duì)象最常見的方式

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，這并不是我們期望的結(jié)果。

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

下列方式可以得到我們期望的結(jié)果（按數(shù)組大小進(jìn)行排序）：

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

我們?cè)儆媚涿瘮?shù)的方式實(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中定義對(duì)象的5種方式（JavaScript中沒有類的概念，只有對(duì)象）i）基于已有對(duì)象擴(kuò)充其屬性和方法

基于已有對(duì)象擴(kuò)充其屬性和方法

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

最簡(jiǎn)單的一種方式，使用起來并不方便，適合于臨時(shí)需要一個(gè)對(duì)象。

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

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

JavaScript

//工廠方法
function createObject() {
  var object = new Object();//創(chuàng)建一個(gè)對(duì)象
  object.name = "zhangsan";//為該對(duì)象添加一個(gè)name屬性
  object.password = "123";//為該對(duì)象添加一個(gè)password屬性
  object.get = function() {//為該對(duì)象添加一個(gè)get方法
    alert(this.name+","+this.password);
  };
  return object;//返回該對(duì)象
}
 
var object1 = createObject();//調(diào)用createObject工廠方法創(chuàng)建對(duì)象object1
var object2 = createObject();//調(diào)用createObject工廠方法創(chuàng)建對(duì)象object2
object1.get();//調(diào)用對(duì)象get方法
object2.get();//調(diào)用對(duì)象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ù)的工廠方法缺點(diǎn)：

每創(chuàng)建一個(gè)對(duì)象，內(nèi)存中就創(chuàng)建一個(gè)get方法，比較浪費(fèi)內(nèi)存，且影響性能。而我們的期望是，創(chuàng)建兩個(gè)不同的對(duì)象，它們的屬性是不一樣的，但方法是共用的。所以接下來我們需要改進(jìn)createObject工廠方法。

改進(jìn)的工廠方法：

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)建一個(gè)對(duì)象，get方法都是共用的。讓一個(gè)函數(shù)對(duì)象被多個(gè)對(duì)象所共享，而不是每一個(gè)對(duì)象都擁有一個(gè)函數(shù)對(duì)象。

iii）構(gòu)造函數(shù)方式創(chuàng)建對(duì)象

不帶參數(shù)的構(gòu)造函數(shù)：

JavaScript

 function Person(){
  //在執(zhí)行第一行代碼前，js引擎會(huì)為我們生成一個(gè)對(duì)象
  this.name = "zhangsan";
  this.password = "123";
  this.getInfo = function() {
    alert(this.name+","+this.password);
  };
 
  //此處有一個(gè)隱含的return語句，用于將之前生成的對(duì)象返回（也是跟工廠方式不一樣的地方）
}
 
var p1 = new Person();
p1.getInfo();

帶參數(shù)的構(gòu)造函數(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)建對(duì)象

prototype是Object對(duì)象里面的一個(gè)屬性

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";//對(duì)象生成之后再去改變屬性
p1.getInfo();
p2.getInfo();

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

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

瀏覽器將會(huì)打?。簔hangsan，lisi，456 和 zhangsan，lisi，123.

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

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

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

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

v）動(dòng)態(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();

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

17、JavaScript中對(duì)象的繼承（5種方式）

第一種方式:對(duì)象冒充

冒充對(duì)象繼承

JavaScript

//父類
function Parent(username) {
  this.username = username;
  this.sayHello = function() {
    alert(this.username);
  };
}
//子類
function Child(username,password){
  //下面三行代碼是最關(guān)鍵的
  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()

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

call 繼承父類

JavaScript

function test(str) {
  alert(this.name+","+str);
}
var object = new Object();
object.name = "zhangsan";
//test.call相當(dāng)于調(diào)用了test函數(shù)
test.call(object,"html5war");//將object賦給了this

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

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

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

第四種方式:原型鏈方式（無法給構(gòu)造函數(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();

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

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

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

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基礎(chǔ)知識(shí)點(diǎn)歸納(推薦)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: