DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript基礎知識點歸納(推薦)
JavaScript基礎知識點歸納(推薦)
編輯:JavaScript基礎知識     

定義在函數外的變量一定是全局變量;定義在函數內的變量,如果聲明了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:不會被存儲到客戶端的硬盤上,而是放在浏覽器進程所處的內存當中,當浏覽器關閉時則該回話cookie就銷毀了。

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

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

5、Function對象

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

6、隱含的對象arguments

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

7、函數名.length

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

8、JavaScript中有五種原始數據類型

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

Undefined數據類型的值只有一個:undefined;

Null數據類型的值只有一個:null;

Boolean數據類型的值有兩個:true和false;

9、typeof運算符

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

10、在JavaScript中,如果函數沒有聲明返回值,那麼會返回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浏覽器中我們會看到浏覽器調試控制台中打印出一大堆屬性,說明window對象中的屬性是可以枚舉的。

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

動態添加/刪除對象的屬性

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屬性已經被刪除
alert(object.username); 

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

定義對象最常見的方式

JavaScript

 var object = {
  username:"zhangsan",
  password:12345
};
alert(object.username);
alert(object.password);

15、數組

數組定義

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

調用數組的sort()方法,浏覽器打印1,25,4,這並不是我們期望的結果。

對於JavaScript數組的sort方法來說,它會先將待排序的內容轉換為字符串(調用toString()方法),按照字符串的先後順序進行排序。

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

數組排序

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

我們再用匿名函數的方式實現:

匿名函數排序

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

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

ii)工廠方式創建對象

不帶參數的工廠方法:

JavaScript

//工廠方法
function createObject() {
  var object = new Object();//創建一個對象
  object.name = "zhangsan";//為該對象添加一個name屬性
  object.password = "123";//為該對象添加一個password屬性
  object.get = function() {//為該對象添加一個get方法
    alert(this.name+","+this.password);
  };
  return object;//返回該對象
}
 
var object1 = createObject();//調用createObject工廠方法創建對象object1
var object2 = createObject();//調用createObject工廠方法創建對象object2
object1.get();//調用對象get方法
object2.get();//調用對象get方法 

帶參數的工廠方法:

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

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

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

iii)構造函數方式創建對象

不帶參數的構造函數:

JavaScript

 

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

帶參數的構造函數

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)方式創建對象

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

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

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

浏覽器將會打印:zhangsan,lisi,456 和 zhangsan,lisi,123.

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

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

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

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

v)動態原型方式

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

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

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

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

call 繼承父類

JavaScript

function test(str) {
  alert(this.name+","+str);
}
var object = new Object();
object.name = "zhangsan";
//test.call相當於調用了test函數
test.call(object,"html5war");//將object賦給了this 

接下來我們用call方式實現對象的繼承

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

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

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

原型鏈繼承

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

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

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

使用混合方式實現對象的繼承

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved