第198天：js---内置對象的原型鍊和其他知識

一、内置對象的原型鍊

1、Object原型

1 function test() {}
 2    alert(test.toString());
 3    
 4    //新增屬性
 5    Object.prototype.mytest = function() {
 6        alert("123");
 7    }
 8    var o = new Object();
 9    o.mytest();
10    
11    //重寫屬性
12     Object.prototype.toString = function()
13    {
14        alert("破壞之王");
15    }
16    o.toString();      

2、Object對象是Function對象的執行個體

1 /*object的__proto__指向Function對象的原型*/
 2     //Object對象是Function對象的一個執行個體
 3     console.log(Object.__proto__ === Function.prototype);//true
 4 
 5     /*Function.prototype對象的原型的__proto__屬性指向Object.prototype*/
 6     console.log(Function.prototype.__proto__ === Object.prototype)
 7 
 8     /*object的原型的__proto__屬性為null*/
 9     console.log(Object.prototype.__proto__ )
10 
11 
12     /*總結*/
13     /*一個自定義對象可以通路到Function對象的所有屬性和方法，也可以通路到Object對象的所有屬性和方法*/      

3、内置對象的執行個體指向

1 //Object對象是Function對象的一個執行個體
 2    //Object對象的__proto__指向Function的原型
 3    console.log(Object.__proto__===Function.prototype);//true
 4 
 5    console.log(Object.prototype.__proto__);//null
 6 
 7    console.log(Function.prototype.__proto__===Object);//false
 8    console.log(Function.prototype.__proto__===Object.prototype);//true
 9 
10    //内置對象的_proto_的指向
11    console.log(Number.__proto__ ===Function.prototype);//true
12    console.log(Boolean.__proto__ ===Function.prototype);//true
13    console.log(String.__proto__ ===Function.prototype);//true
14    console.log(Object.__proto__ ===Function.prototype);//true
15    console.log(Function.__proto__ ===Function.prototype);//true
16    console.log(RegExp.__proto__ ===Function.prototype);//true
17    console.log(Error.__proto__ ===Function.prototype);//true
18    console.log(Date.__proto__ ===Function.prototype);//true
19 
20 
21    //自定義對象的原型的__proto__指向
22    function Product(){};
23 
24    Product.prototype={};
25 
26    var iphone=new Product();
27    console.log(Product.prototype.__proto__);//object
28    console.log(Product.prototype.__proto__===Object.prototype);//true
29 
30    //構造函數就是一個函數，函數都是由Function實作的，都是它的一個執行個體
31    console.log(Product.__proto__===Function.prototype);//true
32 
33    var obj = new Object();
34    //toString是object的方法，因為在原型中，是以所有對象都可以通路
35    //Object.prototype.toString=function(){};
36    console.log(obj.toString());//[object Object]
37 
38    /*object的執行個體指向Object的原型對象*/
39    console.log(obj.__proto__ === Object.prototype);//true      

4、自定義對象的原型鍊

1 //object的__proto__指向的是Function.prototype
 2     console.log(Object.__proto__ ===Function.prototype)
 3 
 4 
 5     /*null*/
 6     console.log(Object.prototype.__proto__);
 7 
 8 
 9     /*object*/
10     console.log(Function.prototype.__proto__ === Object) //false
11     console.log(Function.prototype.__proto__ === Object.prototype)  //ture
12 
13 
14     /*内置對象的__proto__指向*/
15     console.log(Number.__proto__ === Function.prototype)  // true
16     /*
17     Boolean.__proto__ === Function.prototype // true
18     String.__proto__ === Function.prototype  // true
19     Object.__proto__ === Function.prototype  // true
20     Function.__proto__ === Function.prototype //true
21     Array.__proto__ === Function.prototype   // true
22     RegExp.__proto__ === Function.prototype  // true
23     Error.__proto__ === Function.prototype   // true
24     Date.__proto__ === Function.prototype    // true*/
25 
26 
27     /*自定義對象的原型的__proto__指向*/
28     function Product(){}
29 
30     Product.prototype={}
31 
32     var iphone = new Product()
33 
34     console.log(Product.prototype.__proto__)
35     console.log(Product.prototype.__proto__ === Object)  //false
36     console.log(Product.prototype.__proto__ === Object.prototype) //true
37 
38     var obj = new Object()
39 
40    /* Object.prototype.toString=function(){
41         alert('破壞之王')
42     }*/
43 
44     console.log(obj.toString())
45     /*構造函數其實就是一個函數
46     函數都是Function實作的。都是它的一個執行個體*/
47 
48    /* Function
49     Function.prototype
50     Object
51     Object.prototype*/
52 
53     console.log(Product.__proto__ ===Function.prototype);
54 
55     console.log(Array.prototype.__proto__  === Object.prototype );      

二、其他知識

1、hasOwnproperty

1 var person= function(){
 2          age=1
 3       };
 4   
 5   person.prototype={
 6          name:'wangshukui'
 7       };
 8 
 9 
10 var xiaowang = new person();
11 //執行個體化之後 重新配置設定記憶體 系統會自動屏蔽原型同名 -- 原理 開辟新的空間
12 
13   //
14  alert(xiaowang.hasOwnProperty("name"));//false --表明是原型屬性
15 
16  alert(xiaowang.hasOwnProperty("age")); //false --類屬性
17  
18  
19  //當定義一個執行個體化屬性之後，會自動屏蔽原型屬性
20  xiaowang.name='小李';
21  alert(xiaowang.hasOwnProperty('name')) //true
22  
23  xiaowang.sex='nan';
24   alert(xiaowang.hasOwnProperty('sex')) //true      

2、isPrototypeOf

判斷iphone是否擁有Product的原型屬性

1 function Product(){
 2         this.name='iphone8';
 3         this.description='手機中的戰鬥機';
 4         this.price=7777;
 5         this.date=new Date();
 6         this.add = function(){};
 7     }
 8 
 9     Product.prototype={
10         test:11111,
11         buy:function(){}
12     }
13     var iphone = new Product()
14     console.log(Product.prototype.isPrototypeOf(iphone));//true      

3、constructor 檢視對象的構造函數

1 //constructor : 檢視對象的構造函數
 2 
 3         /*function Aaa(){
 4          }
 5 
 6          var a1 = new Aaa();
 7 
 8          alert( a1.constructor );  //Aaa
 9 
10          var arr = [];
11          alert( arr.constructor == Array );  //true*/
12 
13 
14         /*function Aaa(){
15          }
16          //Aaa.prototype.constructor = Aaa;   //每一個函數都會有的，都是自動生成的
17 
18          //Aaa.prototype.constructor = Array;
19 
20          var a1 = new Aaa();
21          alert( a1.hasOwnProperty == Object.prototype.hasOwnProperty );  //true*/
22 
23 
24         /*function Aaa(){
25          }
26 
27          Aaa.prototype.name = '小明';
28          Aaa.prototype.age = 20;
29 
30          Aaa.prototype = {
31          constructor : Aaa,
32          name : '小明',
33          age : 20
34          };
35 
36          var a1 = new Aaa();
37          alert( a1.constructor );*/
38 
39 
40         function Aaa(){
41         }
42 
43         Aaa.prototype.name = 10;
44         Aaa.prototype.constructor = Aaa;
45 
46         for( var attr in Aaa.prototype ){
47             alert(attr);
48         }      

4、instanceof : 對象與構造函數在原型鍊上是否有關系

1 //instanceof : 對象與構造函數在原型鍊上是否有關系
 2 
 3         function Aaa(){
 4         }
 5 
 6         var a1 = new Aaa();
 7 
 8         //alert( a1 instanceof Object );  //true
 9 
10 
11         var arr = [];
12 
13         alert( arr instanceof Array );//true      

5、靜态屬性、原型屬性和執行個體屬性

1  //對象構造函數
 2     function Atest(name){
 3         //私有屬性，隻能在對象構造函數内部使用
 4         var className = "Atest";
 5         //公有屬性,在對象執行個體化後調用
 6         this.name = name;
 7         //對象方法
 8         this.hello = function(){
 9             alert(this.name);
10             alert(this.msg());//使用原型方法擴充的方法可以在類内部使用
11             alert(this.sex);//使用原型方法擴充的屬性可以在類内部使用
12             alert(Atest.age);//靜态屬性調用時格式為[對象.靜态屬性]
13         }
14     }
15     //類方法 (實際是靜态方法直接調用) 位置：Person類的外部 文法格式：類名稱.方法名稱 = function([參數...]){ 語句行; }
16     Atest.Run = function(){
17         alert("我是類方法 Run");
18     }
19 
20 
21     //原型方法
22     Atest.prototype.msg = function(){
23         alert("我的名字是："+this.name);//如果原型方法當作靜态方法直接調用時，this.name無法被調用
24     }
25 
26     //公有靜态屬性 在類的外部
27     Atest.age = 20;//公有靜态屬性不能使用 【this.屬性】，隻能使用 【對象.屬性】 調用
28 
29     //原型屬性，當作是類内部的屬性使用【this.原型屬性】，也可以當成公有靜态屬性使用【對象.prototype.原型屬性】
30     Atest.prototype.sex = "男";
31 
32     Atest.Run(); //類方法也是靜态方法，可以直接使用 【對象.靜态方法()】
33     Atest.prototype.msg();//原型方法當成靜态方法使用時【對象.prototype.方法()】
34     alert(Atest.prototype.sex);//原型屬性當作靜态屬性使用時【對象.prototype.方法()】
35     var a = new Atest("zhangsan");//對象方法和原型方法需要執行個體化對象後才可以使用
36     a.hello();//對象方法必須執行個體化對象
37     a.msg();//原型方法必須執行個體化對象
38     alert(a.age)://錯誤，公有靜态屬性隻能使用 【對象.屬性】調用
39 
40     //ps:盡量将方法定義為原型方法，原型方法避免了每次調用構造函數時對屬性或方法的構造，節省空間,建立對象快.