技術標籤：前端jsjs

函式

定義和呼叫

系統函式：

• parseInt():是將字串轉換為整數。
• parseFloat():是結果返回一個浮點數。
• isNan():判斷函式是否是NaN（是不是數字），是數字返回false,反之true。
• eval():是以字串形式表示js程式碼串，並回饋執行的結果。

自定義函式

function 函式名（）{
	語句
}

還有就是匿名函式
自己調自己

<script type="text/javascript">
	(function(a, b) {
		var c = a * b;
		console.log(c)
	})(
 
2, 50);
</script>

可以當變數用，也可以當方法用

<script type="text/javascript">
	var demo = (function(a, b) {
		var c = a * b;
		console.log(c);
	});
	demo(2, 50); //當方法使用
	console.log(demo); //當變數輸出
</script>

呼叫

//作為函式呼叫
<script type="text/javascript">
	function f1(a, b) {
		console.log(this) //window
		return a * b;
	}

	var sum = f1(3, 4); // 12
	console.log(sum)
</script>
 

//作為方法呼叫
<script type="text/javascript">
	var f1 = {

		name: "zhangsan",

		age: 23,

		f2: function() {
			console.log(this)   //{name: "zhangsan", age: 23, f2: ƒ}
			return this.name + " " + this.age;

			return this;

		}

	}

	f1.f2(); // zhangsan 23
</script>
 

//使用建構函式呼叫
<script type="text/javascript">
	function f1(arg1, arg2) {

		this.name = arg1;

		this.age = arg2;

	}

	var x = new f1("zhangsan", 23);
	
	x.name; //返回 zhangsna
	console.log(x.name)
</script>

//作為函式方法呼叫
<script type="text/javascript">
	var fun;
	
	function f1(a,b){
	
	    return a*b;
	
	}
	
	fun=f1.call(fun , 3 , 4);  //返回 12
	console.log(fun)
</script>

<script type="text/javascript">
	function f1(a,b){
		
	       return a*b;
	
	}
	
	var f2=[3,4];
	
	var f3=f1.apply(f3,f2)  //返回12 
	console.log(f3)
</script>

this

函式內部的this指向

在不使用call、apply、bind的情況下，這些this的指向，當我們呼叫函式的時候是確定的。呼叫函式的不同決定了this指向的不同

普通函式

正常模式：this指向Window

<script type="text/javascript">
	function fn () {
	    console.log(this)   //Window {window: Window, self: Window, document: document, name: "", location: Location, …}
	}
	fn();
</script>

嚴格模式：this不知道指向誰，所以列印undefined

<script type="text/javascript">
	function fn () {
	    'use strict'
	    console.log(this)   //undefined
	}
	fn();
</script>

表示式函式

嚴格模式下this是undefined，正常模式是Window

<script type="text/javascript">
	var fn = function() {
	    console.log(this)   //Window {window: Window, self: Window, document: document, name: "", location: Location, …}
	}
	fn();
</script>

建構函式

建構函式的this指向例項物件，下例指向例項物件fn

<script type="text/javascript">
	function fn(name) {
	    this.name=name;
	    console.log(this)   //fn {name: "constructor function"}
	}
	var fn = new fn('constructor function');
</script>

物件方法呼叫

物件呼叫自身方法時的this指向該方法所屬的物件

<script type="text/javascript">
	var obj = {
	    name:'zhangsan',
	    say:function() {
	        console.log(this)
	    }
	}
	obj.say() //obj   {name: "zhangsan", say: ƒ}
</script>

事件繫結方法

事件繫結時，this指向當前事件所繫結的物件

<button>點我</button>
<script type="text/javascript">
	var btn = document.querySelector('button');
	btn.onclick = function() {
	    console.log(this)   //button按鈕
	}
</script>

定時器函式

定時器裡的函式是回撥函式，所有回撥函式的this都指向Window

<script type="text/javascript">
	setTimeout(function() {
		console.log(this) //Window {window: Window, self: Window, document: document, name: "", location: Location, …}
	}, 1000)
</script>

立即執行函式（自呼叫函式）

嚴格模式下this是undefined，正常模式是Window

<script type="text/javascript">
	(function(){
	    'use strict'
	    console.log(this)   //undefined
	})()
</script>

改變函式內部的指向

1. call方法

• call()方法呼叫一個物件
• 簡單理解為呼叫函式的方式，但是它可以改變函式的 this 指向
• 應用場景: 經常做繼承

<script type="text/javascript">
	var f1 = {
		name: 'zhangsan'
	}
	function fn(a, b) {
	      console.log(this);
	      console.log(a+b)
	};
	fn()	// 此時this的指向是window
	fn.call(f1,1,2) //此時的this指向的是物件f1,引數使用逗號隔開
	
	// call 第一個可以呼叫函式 第二個可以改變函式內的this 指向
	// call 的主要作用可以實現繼承
	function Father(name, age, sex) {
	    this.name = name;
	    this.age = age;
	    this.sex = sex;
	}
	
	function Son(name, age, sex) {
	    Father.call(this, name, age, sex);
	}
	var son = new Son('張三', 23, '男');
	console.log(son);
</script>

2. apply方法

• apply() 方法呼叫一個函式
• 簡單理解為呼叫函式的方式，但是它可以改變函式的 this 指向
• 應用場景: 經常跟陣列有關係

<script type="text/javascript">
	var f1 = {
		name: 'andy'
	}
	 function fn(a, b) {
	      console.log(this);
	      console.log(a+b)
	};
	fn()// 此時的this指向的是window
	fn.apply(f1,[1,2])//此時的this指向的是物件o,引數使用陣列傳遞
	// 1. 也是呼叫函式 第二個可以改變函式內部的this指向
	// 2. 但是他的引數必須是陣列(偽陣列)
	// 3. apply 的主要應用 比如說我們可以利用 apply 藉助於數學內建物件求陣列最大值 
	// Math.max();
	var arr = [1, 66, 3, 99, 4];
	var arr1 = ['red', 'pink'];
	// var max = Math.max.apply(null, arr);//不需要改變this指向，寫null
	var max = Math.max.apply(Math, arr);//但是寫null不太合適，寫max的呼叫者Math最好,最大
	var min = Math.min.apply(Math, arr);//但是寫null不太合適，寫max的呼叫者Math最好，最小
	console.log(max, min);
</script>

3. bind方法

• bind() 方法不會呼叫函式，但是能改變函式內部this 指向，返回的是原函式改變this之後產生的新函式
• 如果只是想改變 this 指向，並且不想呼叫這個函式的時候，可以使用bind
• 應用場景：不呼叫函式，但是還想改變this指向

 <script type="text/javascript">
	var f1 = {
		name: 'andy'
	};

	function fn(a, b) {
		console.log(this);
		console.log(a + b);
	};
	var f = fn.bind(f1, 1, 2); //此處的f是bind返回的新函式
	f(); //呼叫新函式  this指向的是物件f1 引數使用逗號隔開
</script>

4. call、apply、bind三者異同

• 共同點 : 都可以改變this指向
• 不同點:
  • call 和 apply 會呼叫函式, 並且改變函式內部this指向.
  • call 和 apply傳遞的引數不一樣,call傳遞引數使用逗號隔開,apply使用陣列傳遞
  • bind 不會呼叫函式, 可以改變函式內部this指向.
• 應用場景
  1. call 經常做繼承.
  2. apply經常跟陣列有關係. 比如藉助於數學物件實現陣列最大值最小值
  3. bind 不呼叫函式,但是還想改變this指向. 比如改變定時器內部的this指向

嚴格模式

ES5的嚴格模式是採用具有限制性javaScript變體的一種方式，即在嚴格的條件下執行。IE10以上支援，舊版本會被忽略。
特點：

• 消除了JavaScript語法的一些不合理、不嚴謹之處
• 消除程式碼執行中的不安全之處，保證執行安全
• 提高編譯器效率，增加執行速度。
• 禁用了在ECMScript的未來版本中可能會定義的一些語法，如一些保留字不能做變數名（class、enum、export、extends、import、super）
• 嚴格模式可以應用到整個指令碼或者個別函式中
  為指令碼開啟嚴格模式
  需要在所有的js語句之前寫

'use strict';
//下面的js程式碼會按照嚴格模式執行

有的js是基本模式，有些是嚴格模式的情況，可以將真個指令碼檔案放在一個立即執行的匿名函式中，這樣獨立建立一個作用域，不影響其他js指令碼檔案

<script type="text/javascript">
	(function() {
		"use stroct";

	})()
</script>

為函式開啟嚴格模式
在函式內部第一行寫’use strict’;

<script type="text/javascript">
	function fun(){
	  'use strict';
	//函式內部下面的程式碼按照嚴格模式執行
	}
</script>

嚴格模式的要求

• 正常模式中，如果一個變數沒有聲名就賦值，預設是全域性變數。嚴格模式禁止這種用法，變數必須先聲名，才能使用。
• 嚴禁刪除已經聲名的變數。

<script type="text/javascript">
	'use strict';
	var x = 10;
	delete x; //會報錯
	console.log(x)
</script>

• 嚴格模式下this 指向問題
  普通模式下this指向window物件，嚴格模式下全域性作用域中函式中的this是undefined。
  嚴格模式下，建構函式不加new呼叫，會報錯，加new呼叫，this指向的還是建立的例項
  定時器中的this指向還是window
  事件、物件還是指向呼叫者
• 函式中不能有重名的引數
• 現版本的JavaScript引入“塊級作用域”ES6中已經引入，所以嚴格模式不允許在非函式的程式碼塊中sh宣告函式。
  如 if {} for(){}
  嚴格模式不允許用8進位制

量必須先聲名，才能使用。

• 嚴禁刪除已經聲名的變數。

<script type="text/javascript">
	'use strict';
	var x = 10;
	delete x; //會報錯
	console.log(x)
</script>

• 嚴格模式下this 指向問題
  普通模式下this指向window物件，嚴格模式下全域性作用域中函式中的this是undefined。
  嚴格模式下，建構函式不加new呼叫，會報錯，加new呼叫，this指向的還是建立的例項
  定時器中的this指向還是window
  事件、物件還是指向呼叫者
• 函式中不能有重名的引數
• 現版本的JavaScript引入“塊級作用域”ES6中已經引入，所以嚴格模式不允許在非函式的程式碼塊中sh宣告函式。
  如 if {} for(){}
  嚴格模式不允許用8進位制