JavaScript基礎之函數詳解

    // 方式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();

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

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

    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)

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

	 // 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) { 
	     console.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,1,2)  //此處的f是bind返回的新函數
	  f()  //調用新函數  this指向的是對象o

	// 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} 

// 1.父構造函數
function Father(uname, age) {
  // this 指向父構造函數的對象實例
  this.uname = uname;
  this.age = age;
}
Father.prototype.money = function() {
  console.log(100000);
 };
 // 2.子構造函數 
  function Son(uname, age, 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,uname,exam;money在fahter外層的原型對象裡面。

// 父類
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