基礎總結（一）

1. JS取消默認事件和阻止事件冒泡

=====================原生js====================
1.阻止a標籤的跳轉和input的上傳
//阻止瀏覽器的默認行爲 
function stopDefault( e ) { 
    //阻止默認瀏覽器動做(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函數器默認動做的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}
2.阻止事件冒泡
function stopBubble(e) { 
//若是提供了事件對象，則這是一個非IE瀏覽器 
if ( e && e.stopPropagation ) 
    //所以它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //不然，咱們須要使用IE的方式來取消事件冒泡 
    window.event.cancelBubble = true; 
}

=====================jQuery====================

3.若是使用jQuery，既能夠阻止默認事件，也能夠阻止冒泡

$('#linkA').on('click', function () {
    return false
})

 2. 強制類型和隱式類型轉換

1、強制類型轉換
Number()
parseInt()
parseFloat()
toString()
String()
Boolean()

注：
1.Number()
（1）若是是布爾值，true和false分別被轉換爲1和0 
（2）若是是數字值，返回自己。 
（3）若是是null，返回0. 
（4）若是是undefined，返回NaN。 
（5）若是是字符串，遵循如下規則： 
　　一、若是字符串中只包含數字，則將其轉換爲十進制（忽略前導0） 
　　二、若是字符串中包含有效的浮點格式，將其轉換爲浮點數值（忽略前導0） 
　　三、若是是空字符串，將其轉換爲0 
　　四、若是字符串中包含非以上格式，則將其轉換爲NaN 
（6）若是是對象，則調用對象的valueOf()方法，而後依據前面的規則轉換返回的值。若是轉換的結果是NaN，則調用對象的toString()方法，再次依照前面的規則轉換返回的字符串值。

2.parseInt()
（1）忽略字符串前面的空格，直至找到第一個非空字符 
（2）若是第一個字符不是數字符號或者負號，返回NaN 
（3）若是第一個字符是數字，則繼續解析直至字符串解析完畢或者遇到一個非數字符號爲止 
（4）若是上步解析的結果以0開頭，則將其看成八進制來解析；若是以0x開頭，則將其看成十六進制來解析 
（5）若是指定radix參數，則以radix爲基數進行解析
3.parseFloat() 與parseInt基本相同 除了小數點
4.toString（）除了undefined和null都有toString的方法
5.Boolean(mix)函數，將任何類型的值轉換爲布爾值。
　　如下值會被轉換爲false：false、」"、0、NaN、null、undefined，其他任何值都會被轉換爲true

2、隱式類型轉化
1) 字符串鏈接符+，會把其它數據類型轉化爲String()，而後字符串拼接
算數運算符+ 會把 數據類型轉化爲Number() 而後作+法運算
1+"true" = String(1) + "true" = "1true"
1+true = 1+Number(true) = 1+ 1 = 2
1+undefined = 1+Number(undefined) = 1+NaN = NaN
1+null = 1+Number(null) = 1+0 = 1
[]==![]  =>  []==false  =>  []==Number(false)  => [] == 0  => [].toString() => 0  =>  '' == 0  =>  Number('') == 0  =>  0 == 0 
2）關係運算符兩邊若是有一邊是字符串的話，會將其它數據類型轉化爲Number，進行比較
"2">10  => false   //Number('2') > 10  => 2> 10 ==> false
3)關係運算符若是兩邊都是字符串的時候，同時轉化爲Number比較，而是把對應的Unicode編碼轉化爲數字
"2" > "10" => true // 
4) undefined == undefind => true
null == null => true
undefined == null => true
5)NaN和任何數據比較都是NaN
NaN == NaN  => false

 3. 建立對象的幾種方式

 

1.字面式建立對象
//字面量建立對象，代碼簡單，缺點是會產生重複代碼
var person = {
    name: 'Anglue',
    age: 15,
    getName: function () {
        return this.name
    }
}
console.log(person.getName())
2.工廠模式
//工廠模式 instanceof 沒法判斷對象是誰的實例
function Stu(name){
    let obj = new Object()
    obj.name = name
    return obj
}

let stu = new Stu('wahaha')
console.log(stu.name) //'wahaha'
console.log(stu instanceof Stu)  //false
console.log(stu instanceof Object) //true

3. 構造函數模式
function Stu(name,age){
    this.name = name
    this.age = age
    this.getName = function () {
        return this.name
    }
}
var stu = new Stu('Xiaoming', 15)
console.log(stu.getName())
console.log(stu instanceof Stu) //true
4.原型方法
//原型方式建立：優勢是全部的實例均可以共享它的方法和屬性，實例也能夠定義本身的屬性和方法，能夠覆蓋原型對象上的方法和屬性名
function Stu(){

}
Stu.prototype.name = 'Helan'
Stu.prototype.getName = function(){
    return this.name
}

var stu = new Stu()
console.log(stu.getName()) //'Helan'
var stu1 = new Stu()
stu1.name = 'fuck'
console.log(stu1.getName()) //'fuck'
5.組合式（構造函數+原型方法）經常使用
function Stu(name, age){
    this.name = name
    this.age = age
}

Stu.prototype.getName = function(){
    return this.name
}
Stu.prototype.getAge = function(){
    return this.age
}

var stu = new Stu('Hong',22)
console.log(stu.getName()) //'Helan'
console.log(stu.getAge()) // 22

 4. js中關於函數名和變量名重名，預解析，做用域的問題

1.js的預解析指的是變量的聲明和函數的聲明前置，函數的前置要比變量的聲明前置提早， 舉例：
function a(){}
var a = 1
console.log(a)
----------------------------------------------
var a = 1
function a(){}
console.log(a)

----------------------------------------------
以上兩種形式均可以解析爲一下結果

function a(){}  //函數的聲明優先前置
var a;  //變量的聲明前置
a = 1   //變量的賦值 number
console.log(a) //打印a 1
2.做用域：js在執行到某一個變量的時候，會先在本做用域查找變量，若是沒有找到會到上一層做用域查找，以此類推
舉例：
var a = 1;
function b(){
    a = 10;
    return;
    function a(){
        console.log(a);
    }
}
b();
console.log(a);

首先分析預解析結果：
function b(){
    function a(){
        console.log(a);
    }
    a = 10
    return
}
var a;
a = 1
b()
console.log(a)

在函數b中，先有一個函數名爲a 的函數， 下面的 a = 10 賦值，此時在b()執行的時候，並無調用a，因此a函數不執行，接下來a賦值爲10，
首先查找變量a的地址，按照做用域鏈的查找方法，發現本做用於的b函數裏面定義了一個變量名爲a的函數，因此不須要繼續向外查找，此時a=10就
賦值給了這個函數對象，外面的a不受影響

 5.使用var聲明和不使用var聲明的變量

 

console.log(bin)
var bin = 10
//output: undefined

------------------------------------------------------

console.log(bin)
bin = 10
//output: Error: bin is not defined

------------------------------------------------------
function func(){
    var bin = 10
    console.log(bin)
}
func()   //  10
console.log(bin)  // error bin is not defuned

------------------------------------------------------
function func(){
    bin = 10
    console.log(bin)
}
func()   //  10
console.log(bin)  // 10

------------------------------------------------------
var bin1 = 100;
bin2 = 200
this.bin3 = 300
console.log(bin1)  // 100
console.log(bin2)  // 200
console.log(bin3)  // 300
console.log(this.bin3) // 300
console.log(window.bin1) // 100
console.log(window.bin2) // 200
console.log(window.bin3) // 300
總結：
1.var聲明的變量是在本做用域有效，不用var聲明的變量屬於全局window的一個屬性；
2.var定義的變量不能使用delete， 不適用var定義的變量可使用delete刪除
3.var聲明的變量會前置，屬性不存在前置現象因此報錯
4.爲何使用var bin1聲明的也能夠用window的屬性來訪問，由於聲明bin1的做用域恰好是全局做用域，因此剛好可使用window的屬性來訪問

 6.JS原型和原型鏈

1. javascript 中分爲普通對象和函數對象
凡是經過new Function 建立的對象都是函數對象,其他都是普通對象
js內置的函數對象：Date,String,Number,Object,Function,Boolean,Math...

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.getName = function () {
        return this.name
    }
}
var person1 = new Person('hollen', 20, 'teacher')
var person2 = new Person('wile', 23, 'doctor')
//person1和person2都是Person的實例，兩個實例的contructor指針都指向構造函數Person
console.log(person1.constructor === Person) //true
console.log(person2.constructor === Person) //true

2.原型對象
js中每一個函數都有prototype屬性，這個屬性指向函數的原型對象
【每一個對象都有__proto__屬性，可是隻有函數有prototype屬性】
爲何Person.prototype有一個contructor屬性，由於原型對象Person.prototype 是構造函數Person的一個實例
在Person建立的時候，就建立了他的實例化對象並賦值給prototype

因此console.log(Person.prototype.contrutor === Person)  //true
function Person(){}
Person.prototype.name = 'ZHENZHU'
Person.prototype.age = 33
Person.prototype.job = 'teacher'
Person.prototype.getName = function () {
    return this.name
}
console.log(Person.prototype.constructor === Person) //true