JavaScript基礎之函式詳解

阿新 • • 發佈：2021-12-22

一、函式簡介

1.1.函式的建立

1.函式建立的三種方式

    // 方式1：字串封裝程式碼建立函式
    var fun = new Function("console.log('hello 我是第一個函式');");
    console.log(fun);
    // 函式在被呼叫時執行
    fun()
    // 方式2：函式宣告
    function fun2() {
      console.log(fun2)
    }
    fun2()
    // 方式3：函式表示式
    var fun3 = function () {
      console.log("我是匿名函式的封裝的程式碼")
    };
    console.log(fun3)
    fun3();

1.2.函式的引數和返回值

1.函式的實參可以是一個物件或函式

    function mianji(r){
      return 3.14 * r * r;
    }
    function fun(a) {
      console.log("a = " + a)
    }
    fun(mianji(10))
    fun(mianji)

2.函式的返回值可以是一個物件或函式：

    function fun4(){
      function fun5(){
        alert("我是fun5")
      }
      return fun5;
    }
    a = fun4();
    console.log(a)   //輸出fun5函式體
    a()   //輸出"我是fun5"
    fun4()()   //輸出"我是fun5"

二、函式的型別

2.1. 建構函式

    function Person(name,age,gender) {
      this.name = name;
      this.age = age;
      this.gender = gender;
      this.sayName = function () {
        alert(this.name)
      };
    }
    var per = new Person("張三",15,"男")
    var per2 = new Person("李四",16,"女")
    var per3 = new Person("王五",17,"男")
    console.log(per)

建構函式執行流程：
1.立刻建立一個物件
2.將新建的物件設定為函式中this
3.逐行執行函式中的程式碼
4.新建的物件最為返回值返回
總結：如上為建構函式，必須用new關鍵字呼叫，普通函式時直接呼叫，用this替代obj

2.2. 立即執行函式

    (function(){
      alert("我是一個匿名函式")
    })
    // 函式定義完，立即被呼叫，稱為立即執行函式

2.3. 建構函式的原型prototype

1. 規定，每一個建構函式都有一個prototype 屬性。
2.建構函式通過原型分配的函式是所有物件所共享的
3.我們可以把那些不變的方法，直接定義在 prototype 物件上，這樣所有物件的例項就可以共享這些方法。

簡介：每一個物件都會有一個屬性 proto 指向建構函式的 prototype 原型物件，例項物件使用建構函式 prototype 原型物件的屬性和方法，因為物件有 proto 原型的存在。

物件原型的介紹

2.4. 函式中的this指向

1.當以函式的形式呼叫時，this是window；
2.當以方法的形式呼叫時，誰呼叫方法 this就是誰；
3.當以建構函式的形式呼叫時，this就是新建立的那個物件。

2.5. 函式物件原型的方法

1.Function.prototype.call():使用一個指定的 this 值呼叫一個函式(簡單理解為呼叫函式的方式，但是它可以改變函式的 this 指向)
2.Function.prototype.apply() 方法呼叫一個函式。簡單理解為呼叫函式的方式，但是它可以改變函式的 this 指向
3. Function.prototype.bind() 方法不會呼叫函式,但是能改變函式內部this 指向,返回的是原函式改變this之後產生的新函式

	 // 1.call方法
	 var o = {
	     name:"張美麗"
	 }
	 function fn(a,b) {
	     console.log(this);
	     console.log(a + b);
	   }
	 fn(1,3) //此時的this指向的是window 執行結果：3
	 fn.call(o,1,2) //此時的this指向的是物件o  執行結果：輸出物件o和3
	 // 2.apply方法
	 var o = {
	     name:'andy'
	 }
	 function fn1(a,b) { 
	     consolehttp://www.cppcns.com.log(this);
	     console.log(a + b)
	  }
	  fn()  //此時的this指向的是window 執行結果：3
	  fn.apply(o,[1,2])  //此時的this指向的物件o，執行結果：輸出物件o和3
	 //  3.bind方法
	 var o = {
	     name:'andy'
	 }
	 function fn1(a,b) { 
	     console.log(this);
	     console.log(a + b)
	  }
	  var f = fn.bind(o,2)  //此處的f是bind返回的新函式
	  f()  //呼叫新函式  this指向的是物件o

2.6. 建構函式的繼承

1.先定義一個父建構函式
2.再定義一個子建構函式
3.子建構函式繼承父建構函式的屬性(使用call方法)

	// 1.父建構函式
	function Father(uname) {
	  // this 指向父建構函式的物件例項
	  this.uname = uname;
	}
	// 2.子建構函式
	function Son(uname,age) {
	  // this指向子建構函式的物件例項
	  // 3.使用call方式實現子繼承父的屬性
	  Father.call(this.uname);
	  this.age = age;
	}
	var son = new Son('王帥帥',18);  
	console.log(son);    // Son {age:18}

2.7. 原型物件prototype方法繼承

// 1.父建構函式
function Father(uname,age) {
  // this 指向父建構函式的物件例項
  this.uname = uname;
  this.age = age;
}
Father.prototype.money = function() {
  console.log(100000);
 };
 // 2.子建構函式 
  function Son(uname,score) {
      // this 指向子建構函式的物件例項
      Father.call(this,uname,age);
      this.score = score;
  }
// Son.prototype = Father.prototype;  這樣直接賦值會有問題,如果修改了子原型物件,父原型物件也會跟著一起變化
  Son.prototype = new Father();
  // 如果利用物件的形式修改了原型物件,別忘了利用constructor 指回原來的建構函式
  Son.prototype.constructor = Son;
  // 這個是子建構函式專門的方法
  Son.prototype.exam = function() {
    console.log('孩子要考試');
  }
var son = new Son('王帥哥',18,100);
console.log(son);  //存在一個Father原型物件，在Father裡面有age,exam;money在fahter外層的原型物件裡面。

2.8. Object.create實現類式繼承

// 父類
function Shape() {
  this.x = 0;
  this.y = 0;
}
// 子類
function Rectangle() {
  Shape.call(this); // 呼叫父類的建構函式
}
// 將父類的原型物件，作為子類原型的原型物件。子類續承父類
Rectangle.prototype = Object.create(Shape.prototype);
// 設定子類原型的建構函式
Rectangle.prototype.constructor = Rectangle;
var r = new Rectangle();
r instanceof Rectangle;	// true
r instanceof Shape;		// true