JS學習小結：
學習javaScript腳本語言，首先我們要知道Javascript是什么？
Javascript是什么，簡稱Js，Js是一種基于對象(Object)和事件驅動(Event Driven)并具有安全性能的腳本語言，使用它的目的是與HTML超文本標記語言、Java 腳本語言（Java小程序）一起實現在一個Web頁面中鏈接多個對象，與Web客戶交互作用。從而可以開發客戶端的應用程序等。
當前什么越來越強調溝通，而Js是最接近前后端的語言，越來越多的前后端框架的支持，使他的前途很明朗，作為一種解釋型語言，Js強調實時，在線。
先看下Js的特性：腳本編寫語言，基于對象的語言，簡單性，安全性，動態性和跨平臺特性。
Js的命名規范：有兩種常用的命名規則
匈牙利命名法的原則：變量名=屬性+類型+對象描述。他的關鍵是：以一個或多個小寫字母作為前綴，前綴之后是一個或多個首字母大寫的單詞組合，該單詞指明變量的用途。
駝峰命名法的原則：第一個單詞以小寫字母開始，之后每一個單詞的首字母大寫。例如：myFirstName、myLastName，這樣的變量名看上去就像駝峰一樣此起彼伏，因此得名。駝峰法的關鍵是：除第一個單詞外，其他單詞首字母大小，混合使用大小寫字母來構成變量名和函數名，還可以使用下劃線來形成邏輯斷點，這樣更能增強代碼的可讀性。
JS的注釋規范：
JS中單行注釋用“ // 注釋內容” 標識，多行注釋使用“ /* 注釋內容 */ “標識。注釋的作用是提高代碼的可讀性，不僅自己以后用著方便，也有助于別人閱讀和理解你所編寫的JS代碼，注釋中的內容不會在網頁中顯示。為了方便閱讀，注釋一般放在需要解釋的語句結尾處或者周圍。
在JavaScript中四種基本的數據類型：數值（整數和實數）、字符串型（用“”號或‘’括起來的字符或數值）、布爾型（使True或False表示）和空值。在JavaScript的基本類型中的數據可以是常量，也可以變量。由于JavaScript采用弱類型的形式，因而一個數據的變量或常量不必首先作聲明，而是在使用或賦值時確定其數據的類型的。當然也可以先聲明該數據的類型，它是通過在賦值時自動說明其數據類型的。
一個為 undefined 的值就是指在變量被創建后，但未給該變量賦值以前所具有的值。
--------------------------------------------------------------------------------------------------------------------
下面是一下常用語法：
1.對象定義方式
空對象：沒有任何屬性和方法
var obj = {};
定義對象的屬性：
obj.xx = "123";
定義對象的方法：
obj.function = function(){};
--------------------------------------------------------------------------------------------------------------------
2.函數的定義方式：
JavaScript函數定義Function 函數名 （參數,變元）{函數體;.Return 表達式;}說明： 當調用函數時,所用變量或字面量均可作為變元傳遞?！『瘮涤申P鍵字Function定義?！『瘮得憾x自己函數的名字?！当?，是傳遞給函數使用或操作的值，其值可以是常量 ，變量或其它表達式。 通過指定函數名（實參）來調用一個函數?！”仨毷褂肦eturn將值返回?！『瘮得麑Υ笮懯敲舾械?。
函數中的形式參數： 在函數的定義中，我們看到函數名后有參數表，這些參數變量可能是一個或幾個。那么怎樣才能確定參數變量的個數呢？在JavaScript中可通過arguments .Length來檢查參數的個數。例：Function function_Name(exp1,exp2,exp3,exp4)Number =function _Name . arguments .length;if (Number>1）document.wrile(exp2);if (Number>2)document.write(exp3);if(Number>3)document.write(exp4);...
--------------------------------------------------------------------------------------------------------------------
3 對象的引用傳遞
var person={name:'anker',age:100};
var x = person;
x.age = 19;
console.log(x.age);//19
console.log(person.age);//19
說明js中對象的賦值也是采用引用的方式，同時指向同一個對象。
function changebj(obj) {obj.age = 10};
changebj(person);
console.log(person.age);
10//打印結果也是10,說明函數傳遞的也是對象的引用。修改的是同一個對象。
person.sex = '男';//若該屬性不存在則添加，若存在則覆蓋。
訪問對象的方式：
obj.name
obj["name"]或者obj['name']//必須采用雙引號或者單引號括起來
--------------------------------------------------------------------------------------------------------------------
4.匿名函數
（function(){//代碼 })(); //可立即執行的匿名函數
解釋：，包圍函數（function(){})的第一對括號向腳本返回未命名的函數，隨后一對空括號立即執行返回的未命名函數，括號內為匿名函數的參數。
例子：(function(arg){ alert(arg+100); })(20);
這個例子返回120。
匿名函數，就是沒有引用直接加上()進行執行的函數。
var addFunc = function(a,b){
cosole.log(a+b);
};
--調用方式
addFunc(1,2);
--匿名函數
(function(a,b){console.log(a+b)})(1,2);
上面兩個函數的產生的結果是一樣的.只不過addFunc為函數對象的引用,而匿名函數不存在引用.
--來看個復雜的利用匿名函數的例子
var add = (function(){
var sum = 0 ;
return function(){
for(var i=0;l=arguments.length,i<l;i++){
sum+=arguments[i];
}
return sum;
};
})(); --加上括號為匿名函數的寫法,可以理解為直接執行了此函數,函數的執行結果返回
add(1,2,3,4);
add(2);
--等價于
var func1 = function(){
var sum = 0 ;
return function(){
for(var i=0;l=arguments.length,i<l;i++){
sum+=arguments[i];
}
return sum;
};
};
var add = func1();
add(1,2,3,4);
add(2);
//現在有一個場景，需要設計一個函數，前面每次調用，不會真正去計算，而是把參數保存下來，等到需要計算的再一起計算
var currying = function(fn){
var args = [] ;
return function(){
if(arguments.length === 0){
return fn.apply(this,args);
}else {
Array.PRototype.push.apply(args,arguments);
return arguments.callee;
}
};
}
var add = (function(){
var sum = 0 ;
return function(){
for(var i=0;l=arguments.length,i<l;i++){
sum+=arguments[i];
}
return sum;
};
})();
var add = currying(add);
add(1);
add(2);
add(3);
add();
---------------------------------------------------------------------------------------------------------------------
5.閉包
可以理解成一個函數內的內部函數，它被創建在一個函數內部，引用這其外部函數的變量值。
var a = function(){
var x = 1;
return function(y){
console.log(x+=y);//外部函數的x值就被包裹在引用對象中
}
}
var b = a();//實際上是返回function(y){...}的引用
b();//執行上面的引用，此時的x值變成了private的屬性
閉包的兩個作用：
1.可以讀取函數體所在外部函數的局部變量
2.就是讓這些變量的值始終保持在內存中
------------------------------------------------------------------------------------------------------------------------
6.constructor
constructor 屬性返回對創建此對象的數組函數的引用。
var test=new Array();
if (test.constructor==Array)//判斷test的構造函數是否是Array
{
document.write("This is an Array");
}
var createPerson = function(name,sex,age){
this.name = name;
this.sex = sex;
this.age = age;
};
//undefined
var p1 = new createPerson('z1',19,'男');
//undefined
p1.constructor
//輸出
function (name,sex,age){
this.name = name;
this.sex = sex;
this.age = age;
}
p1.constructor == createPerson
//輸出：true
createPerson.constructor
//Function() { [native code] } //createPerson構造函數為Function,從一個側面說明function也是對象
------------------------------------------------------------------------------------------------------------------------
7.js ==與 ===的區別
一個等號是賦值操作，==先轉換類型再比較，進行值的對比。
而===先判斷類型，如果不是同一類型直接為false，只有類型和值全部都相等，才相等。
------------------------------------------------------------------------------------------------------------------------
8.JS中一切皆對象
JS中基本數據類型，也存在著對象封裝，比如下面數字123的構造函數是Number,test的構造函數是String，包含length的屬性
(123).constructor
//輸出：function Number() { [native code] }
'test'.constructor
//輸出：String() { [native code] }
'test'.length;
//輸出：4
//擴展Number的函數
Number.prototype.toString = function(){
alert('hi,I/'m a number ');
};
(123).toString();
//輸出：hi,I/'m a number
Number.prototype
Number {toString: null, [[PrimitiveValue]]: 0}
------------------------------------------------------------------------------------------------------------------------
9.prototype原型
每個對象都連接到一個原型對象，并且可以從中繼承屬性。所有通過{}或者構造函數創建的對象都連接到Object{}
對象通過(對象名稱.__proto__)可以查看原型
或者通過(對象名稱.constructor.prototype)查看原型
var createPerson = function(name,sex,age){
this.name = name;
this.sex = sex;
this.age = age;
};
var p1 = new createPerson('z1',19,'男');
p1.constructor
//輸出：
fucntion(name,sex,age){
this.name = name;
this.sex = sex;
this.age = age;
}
p1.constructor.prototype
//輸出：
Object {}
createPerson.prototype
//輸出：
Object {}
p1.constructor.prototype === createPerson.prototype
true
var p2 = {sex:'男'};
p2.constructor.prototype
//輸出：Object {}
/*
在javascript中，創建一個新對象時，可以選擇某個對象作為它的原型，比如
*/
var person = {name:'z3',age:18,sex:'男'};
Object.create = function(o){
var F = function(){};
F.prototype = o ;
return new F();
};
var anotherPerson = Object.create(person);
anotherPerson.name;//z3
//對原型對象進行更新,發現已創建的對象值也隨著變化
person.name = 'z4';
"z4"
anotherPerson.name
//輸出："z4"
//但當對象增加相同的屬性后,原型對象的屬性變化，不影響對象的屬性值。因為對象讀取值首先讀取本身對象的值，后讀取原型的值
anotherPerson.name = 'z5';
person.name = 'z6';
//輸出："z6"
anotherPerson.name
//輸出："z5"
delete anotherPerson.name
//輸出：true
anotherPerson.name//輸出對象本身的屬性值,原型對象的屬性值不會被刪除,除非通過delete 原型對象.屬性輸出.
//輸出："z6"
delete person.name
//輸出：true
anotherPerson.name
//輸出：undefined
//原型連接什么時候起作用呢？只有在檢索值的時候才被用到
//如果嘗試者去獲取對象的某個屬性值，但該對象沒有此屬性名，那么JAVASCRIPT會嘗試著從原型對象中獲取屬性值。
//如果原型對象也沒有該屬性值則再從它的原型找，直到該過程最后達到終點Object.prototype。Object
//如果想要的屬性完全不存在于原型鏈中，那么結果就是undefined。
person.age = 18;
anotherPerson.age//顯示什么？
//原型關系是一種動態的關系。如果添加一個新的屬性到原型中，該屬性會立即對所有基于該原型創建的對象可見。
anotherPerson.__proto__===person;//true
__proto__顯示對象的原型鏈
//可以使用hasOwnProperty方法來判斷對像是否含有某個屬性，如果對象擁有獨有的屬性，則返回true
//這個方法不會去檢查原型鏈
------------------------------------------------------------------------------------------------------------------
10. arguments
arguments 對象是函數內部的本地變量；arguments 已經不再是函數的屬性了。
你可以在函數內部通過使用 arguments 對象來獲取函數的所有參數。這個對象為傳遞給函數的每個參數建立一個條目，
條目的索引號從 0 開始。例如，如果一個函數有三個參數，你可以通過以下方式獲取參數：
arguments[0]
arguments[1]
arguments[2]
參數也可以被重新賦值:
arguments[1] = 'new value';
arguments 對象并不是一個真正的Array。它類似于數組，但沒有數組所特有的屬性和方法，除了 length。
例如，它沒有 pop 方法。不過可以將其轉換成數組
------------------------------------------------------------------------------------------------------------------------
11.利用JS特性實現AOP
AOP就是面向切面編程，主要作用是把一些核心業務邏輯模塊無關的功能抽離出來，這些跟業務邏輯無關的功能
通常包括日志統計，安全控制，異常處理等。把這些功能抽離出來后，又通過動態織入的方式滲入到業務邏輯模塊中
在JAVA中，可以通過反射和動態代理機制來實現AOP。但對于javascript這種動態語言，AOP的實現更加簡單
在javascript中實現AOP，都是指把一個函數動態織入到另外一個函數中。我們可以通過擴展Function.prototype來做到這一點
*/
Function.prototype.before = function(beforefn){
var that = this ;
return function(){
beforefn.apply(this,arguments);
return that.apply(this,arguments);
};
};
Function.prototype.after = function(afterfn){
var that = this ;
return function(){
var ret =that.apply(this,arguments);
afterfn.apply(this,arguments);
return ret ;
};
};
var func = function(){
console.log(2);
};
func = func.before(function(){
console.log(1);
}).after(function(){
console.log(3);
});
func();
var func1 = document.getElementById;
undefined
func1('nt-contents');
//報錯信息如下, 是由于document.getElementById函數中的this指向為windows對象,而windows對象不存在這些變量。
VM245:1 Uncaught TypeError: Illegal invocation(…)
//寫那么復雜主要是將this的指向還是定位到document上面
var getElementById1 = (function(func){
return function(){
return func.apply(document,arguments);
}
})(document.getElementById);
------------------------------------------------------------------------------------------------------------------------
12.利用JS特性實現一些有趣的Function
var getId = document.getElementById1; //返回 這個對象 function(){return func.apply(document,arguments);}
var div = getId('ntp-contents');//返回func.apply(document,arguments)的對象，arguments參數值div1,func執行閉包中的document.getElementById函數
alert(div.id);
//我們上節課講到，怎么在一個內部函數中保持外層的this上下使用了一個變量that來保存外,還可以使用以下方法
Function.prototype.bind =function(context){
var self = this ;
return function(){
alert(self);
alert(context);
return self.apply(context,arguments);
}
};
var obj ={name : 'steven'};
var func = (function(){
alert(this.name)
}).bind(obj);
var isType =function(type){
return function(obj){
return Object.prototype.toString.call(obj)==='[object '+type+']';
};
};
var isString = isType('String');
isString('hello world');
var isArray = isType('Array');
isArray([2,3]);
13.call、apply的使用
語法
function.call(thisObj,param1,param2,param3...);
function.apply(thisObj,[param1,param2,param3...]);
用法是改變function的作用域，將參數的上下文作用域修改成thisObj對象, 也可以說this對象為thisObj.
默認的function的作用域是window，this相當于window.function
新聞熱點
疑難解答
