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

字號(hào):


    定義在函數(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è)參考