原文出處:https://segmentfault.com/a/1190000010371988 看了一下這篇文章,自己也手敲了一遍 ...
原文出處:https://segmentfault.com/a/1190000010371988
看了一下這篇文章,自己也手敲了一遍
//1、 立即執行函數 作用:將var變數的作用域限制於函數內,這樣可以避免命名衝突。註意:避免報錯 在開頭加分號 ; (function() { console.log("1、立即執行函數") })() //2、閉包 ; (function() { console.group("2、閉包") function f1() { var n = 0 function f2() { n++ console.log("n=" + n) } return f2 } var result = f1() try { console.log(n) //undefind } catch(e) { // console.log(e) } result() //輸出1 result() //輸出2 result() //輸出3 console.groupEnd() })() //3、使用閉包定義私有變數 ; (function() { console.group("3、使用閉包定義私有變數") function Pronduct() { // this.name = "mike"; var name this.setName = function(v) { name = v } this.getName = function() { return name } } var k = new Pronduct() k.setName('amy') console.log(k.name) //undefined console.log(k.getName()) //輸出amy console.groupEnd() })() //4、prototype //每個JavaScript構造函數都有一個prototype屬性,用於設置所有實例對象需要共用的屬性和方法。 //prototype屬性不能列舉。JavaScript僅支持通過prototype屬性進行繼承屬性和方法。 ; (function() { console.group("4.prototype") function Rectangle(x, y) { this._length = x; this._breadth = y; } Rectangle.prototype.getData = function() { return { length: this._length, breadth: this._breadth } } var x = new Rectangle(3, 4); var y = new Rectangle(5, 8); console.log(x.getData()) //輸出{length:3,breadth:4} console.log(y.getData()) //輸出{length:5,breadth:8} console.groupEnd() })() //5、模塊化 ; (function() { console.group("5.模塊化") var module = (function() { var N = 5; function print(x) { console.log("The result is:" + x) } function add(a) { var x = a + N; print(x) } return { description: "This is descriptione", add: add } })() console.log(module.description) //輸出 "This is descriptione" module.add(5) //輸出 The result is:10 console.groupEnd() })() //6.變數提升 //JavaScript會將所有變數和函數聲明移動到它的作用域的最前面,這就是所謂的變數提升(Hoisting)。 //也就是說,無論你在什麼地方聲明變數和函數, //解釋器都會將它們移動到作用域的最前面。因此我們可以先使用變數和函數,而後聲明它們。 //7、柯里華 //柯里化,即Currying,可以是函數變得更加靈活。我們可以一次性傳入多個參數調用它; //也可以只傳入一部分參數來調用它,讓它返回一個函數去處理剩下的參數。 ; (function() { console.group('7.柯里華') var add = function(x) { return function(y) { return x + y; } } console.log(add(1)(1)) //輸出2 var add1 = add(1) console.log(add1(2)) //輸出3 var add10 = add(10) console.log(add10(2)) //輸出12 console.groupEnd() })() //8.apply,call與bind方法 //call 指定this值調用函數 ; (function() { console.group('8.apply,call與bind方法') var user = { name: "mike", whatIsYourName: function() { console.log(this.name) } } console.group("call") user.whatIsYourName() //輸出 mike var user2 = { name: "amy" } user.whatIsYourName.call(user2) //輸出amy console.groupEnd() //apply apply方法與call方法類似。兩者唯一的不同點在於,apply方法使用數組指定參數,而call方法單獨指定: ; (function() { console.group('apply') var user = { greet: "hello", greetUser: function(userName, name) { console.log(this.greet + " " + userName + ' ' + name) } } var user2 = { greet: "hey" } user.greetUser.call(user2, 'mike', "ak") //輸出 hey mike ak user.greetUser.apply(user2, ['amy', "ak"]) //輸出 hey amy ak console.groupEnd() })() //bind ; (function() { console.group('bind') var user = { greet: "Hello!", greetUser: function(userName) { console.log(this.greet + " " + userName); } }; var greetHola = user.greetUser.bind({ greet: "Hola" }); var greetBonjour = user.greetUser.bind({ greet: "Bonjour" }); greetHola("Rahul") // 輸出"Hola Rahul" greetBonjour("Rahul") // 輸出"Bonjour Rahul" user.greetUser('mike') console.groupEnd() })() })()