js高級

1. 數據類型的分類
   1. 基本（值）類型（操做值的）
      1. String：任意字符串
      2. Number：任意的數字
      3. boolean：true/false
      4. undefined：undefined
      5. null：null（空對象）
   2. 對象（引用）類型（操做地址的）
      1. Object：任意對象都是Object
      2. Function：特殊的對象，存放代碼用於執行的對象
      3. Array：特殊的對象（數值下標，內部數據是有序的）
   3. 判斷對象
      1. typeof：返回數據類型的字符串表達形式（undefined--"undefined" String--"string"[s小寫]）
         1. 能夠判斷undefined/ 數值 / 字符串 / 布爾值
         2. 不能判斷null和Object，Object和array
      2. instanceof：斷定對象的具體類型
      3. ===：
         1. 能夠斷定的只有兩種undefined和null

2. ！=、== 、！==、===的用法和區別

   1. var num = 1;
      var str = '1';
      var test = 1;
       
      test == num   //true　相同類型　相同值
      test === num  //true　相同類型　相同值
      test !== num  //false test與num類型相同，其值也相同,　非運算確定是false
      num == str   //true 　把str轉換爲數字，檢查其是否相等。
      num != str   //false  == 的 非運算
      num === str  //false  類型不一樣，直接返回false
      num !== str  //true   num 與 str類型不一樣 意味着其二者不等　非運算天然是true啦

3. undefined與null的區別
   1. undefined：表明定義了未賦值
   2. null：定義並賦值了，只是值是null
   3. 何時給對象賦值爲null呢？
      1. 初始賦值，代表將要賦值爲對象
      2. 結束前，讓讓對象成爲垃圾對象（被垃圾回收器回收）
4. 函數
   1. 如何調用（執行）函數（假設函數名爲bar）
      1. bar（）：直接調用
      2. obj.bar（）：經過對象調用
      3. new bar（）：new調用
      4. bar.call/apply（obj）：臨時讓bar成爲obj的方法進行調用
5. instanceof是如何判斷的？
   1. 表達式：A instanceof B
   2. 若是B函數的顯式原型對象在A對象的原型鏈上，返回true，不然false

原型和原型鏈

一. 普通對象與函數對象

JavaScript 中，萬物皆對象！但對象也是有區別的。分爲普通對象和函數對象，Object 、Function 是 JS 自帶的函數對象。下面舉例說明

var o1 = {}; 
var o2 =new Object();
var o3 = new f1();

function f1(){}; 
var f2 = function(){};
var f3 = new Function('str','console.log(str)');

console.log(typeof Object); //function 
console.log(typeof Function); //function  

console.log(typeof f1); //function 
console.log(typeof f2); //function 
console.log(typeof f3); //function   

console.log(typeof o1); //object 
console.log(typeof o2); //object 
console.log(typeof o3); //object

在上面的例子中 o1 o2 o3 爲普通對象，f1 f2 f3 爲函數對象。怎麼區分，其實很簡單， 凡是經過 new Function() 建立的對象都是函數對象，其餘的都是普通對象。f1,f2,歸根結底都是經過 new Function()的方式進行建立的。Function Object 也都是經過 New Function()建立的

每一個對象都有 __proto__ 屬性（），通常只有函數對象纔有 prototype 屬性

2、原型鏈中的屬性

• 原型的屬性
  • 每一個函數對象都有一個prototype屬性，它默認指向一個Object空對象（原型對象）
  • 原型對象中有一個屬性constructor，它指向函數對象
• 顯式原型和隱式原型
  • prototype稱爲顯式原型，__proto__稱爲隱式原型
  • 對象的隱式原型的值爲其構造函數的顯式原型的值

先上簡單的圖助於理解

 

• 函數對象的prototype屬性：在定義函數的時候自動添加，默認值是一個空object對象
• 對象的__proto__屬性：建立對象的時候自動添加，默認值爲構造函數的prototype的屬性值
• 程序員能夠直接操做顯式原型，不能直接操做隱式原型，ES6後均可以

 原型鏈終極版圖

所謂原型鏈，指的就是圖中的proto這一條指針鏈！

 

原型鏈的頂層就是Object.prototype，而這個對象的是沒有原型對象的。

可在chrome的控制檯裏面輸入：

Object.__proto__

輸出是:

function Empty() {}

原型鏈，如此而已。

 

 

js中的繼承

<script type="text/javascript">
    function Person(name, age){
        this.age=age
        this.name=name
    }
    Person.prototype.setName = function (name) {
        this.name = name
    }
    function Student(name, age, price){
        Person.call(this, name,age)
        this.price=price
    }
    Student.prototype = new Person() // 把父類綁定到子類中去
    Student.prototype.constructor = Student // 修正子類constructor屬性
    Student.prototype.setPrice = function (price) {
        this.price = price
    }

    var s = new Student("tom", 14, 64648)
    s.setName("alex")
    s.setPrice(1600)
    console.log(s.name, s.age, s.price)

</script>

　

參考http://www.javashuo.com/article/p-cenbrctd-bu.html

 

 

 

詞法分析（嘗試理解）

JavaScript中在調用函數的那一瞬間，會先進行詞法分析。

詞法分析的過程：

當函數調用的前一瞬間(能夠理解爲是編譯時間，不執行），會先造成一個激活對象：Avtive Object（AO），並會分析如下3個方面：

1:函數參數，若是有，則將此參數賦值給AO，且值爲undefined。若是沒有，則不作任何操做。
2:函數局部變量，若是AO上有同名的值，則不作任何操做。若是沒有，則將此變量賦值給AO，而且值爲undefined。
3:函數聲明，若是AO上有，則會將AO上的對象覆蓋。若是沒有，則不作任何操做。

函數內部不管是使用參數仍是使用局部變量都到AO上找。

看兩個例子：

var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
}
foo();  // 問：執行foo()以後的結果是？

 

第二題：

var age = 18;
function foo(){
  console.log(age);
  var age = 22;  # 到這編譯時生成AO.age=undefine;
  console.log(age);
  function age(){  # AO.age=function()這裏變成方法
    console.log("呵呵");
  }
  console.log(age);
}
foo();  // 執行後的結果是？  # 沒有參數

 

詞法分析過程：
一、分析參數，有一個參數，造成一個 AO.age=undefine; 2、分析變量聲明，有一個 var age, 發現 AO 上面已經有一個 AO.age，所以不作任何處理 三、分析函數聲明，有一個 function age(){...} 聲明， 則把原有的 age 覆蓋成 AO.age=function(){...}; 最終，AO上的屬性只有一個age，而且值爲一個函數聲明 執行過程： 注意：執行過程當中全部的值都是從AO對象上去尋找 1、執行第一個 console.log(age) 時，此時的 AO.age 是一個函數，因此第一個輸出的一個函數 二、這句 var age=22; 是對 AO.age 的屬性賦值， 此時AO.age=22 ，因此在第二個輸出的是 2 三、同理第三個輸出的仍是22, 由於中間再沒有改變age值的語句了

 

對象

自定義對象注意點

JavaScript的對象（Object）本質上是鍵值對的集合（Hash結構），可是隻能用字符串做爲鍵，瀏覽器會默認吧鍵的字符串的引號去掉。

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

遍歷對象中的內容：

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

對象.訪問和對象[ ]訪問的區別

 

js語句的位置

jQuery語句必須放在$(function(){});裏面嗎？

不是必須的。

1 2 3

$( function (){ //TODO:這裏的內容表示js只有在DOM元素所有加載結束後纔會執行 });

js在瀏覽器渲染頁面時是按照在文檔中出現的順序來順序執行的。所以若是js文件在<header>部分引入，那麼文件中的js代碼會在dom元素渲染完畢前就執行。假設js代碼中有相似$('#elementId').click(function(){...});這樣的語句，那麼就會由於dom沒有渲染完，致使根本找不到elementId這個對象，從而致使事件綁定失敗。

可是，若是咱們把js的內容放到$(function(){...});裏面，這裏面的代碼會等到文檔內容所有渲染完畢才執行。事件就可以成功綁定了。

因此咱們通常在寫代碼時，一般會注意兩點

一、借用$(function(){});包括js內容

二、將須要引入的js文件放在dom的底部引入

1 2 3 4 5 6 7 8 9 10

< html >      < head >          ....      </ head >      < body >          < div >...</ div >          < div >...</ div >          < script  src = "/script/test.js" >      </ body > </ html >