#JS面向對象及組件開發  ###JS是基于原型的程序 自定義arr的push方法 ``` <script> var arr = [1,2,3]; Array.prototype.push = function(){ for(var i=0; i<arguments.length; i++){ this[this.length] = arguments[i]; } return this.length; }; arr.push(4,5,6); alert(arr); </script> ``` ###什么是包裝對象 ``` var str = 'hello'; alert(typeof str); // string alert(str.charAt(0)); // h alert(str.length); // 5 ``` 為什么基本類型也有屬性和方法？ 這是因為有的基本類型擁有自己對應的包裝對象，像上面的字符串類型對應的包裝對象就是 String ``` var hello = new String('hello'); alert(typeof hello); // object alert(hello.charAt(0)); // h // String.prototype.charAt = function(){}; ``` 再來看看下面發生了什么 ``` var str = 'hello'; // 這里str確實是一個字符串類型 str.charAt(0); // 但是在這里，基本類型就會找到對應的包裝對象類型，然后包裝對象把所有的屬性和方法給了基本類型，然后包裝對象消失 ``` 給基本類型添加一個方法 ``` var str = 'hello'; String.prototype.lastValue = function(){ return this.charAt(this.length - 1); }; alert(str.lastValue()); // o ``` 一個小題目 ``` var str = 'hello'; str.number = 10; alert(str.number); // undefined ``` ###面向對象中的原型鏈 實例對象與原型之間的連接，叫做原型鏈 ``` function Fun(){ } Fun.prototype.num = 10; var f1 = new Fun(); alert(f1.num); // 10 ``` 思考為什么打印出來的是20 ``` function Fun(){ this.num = 20; } Fun.prototype.num = 10; var f1 = new Fun(); // 通過console.log(f1) 可以查看原型鏈 console.log(f1); alert(f1.num); // 20 ``` 查看原型鏈  原型鏈的最外層： Object.prototype ``` function Fun(){ } Object.prototype.num = 30; var f1 = new Fun(); alert(f1.num); // 30 ``` ``` function Fun(){ this.num = 20; } Fun.prototype.num = 10; Object.prototype.num = 30; var f1 = new Fun(); alert(f1.num); // 20 ```