js 面向對象以及原型及原型鏈

時間 2020-06-17

原文原文鏈接

面向對象

是一種編程思惟html

全部的程序中的參與的對象提取出來，給對象設置不一樣的屬性和方法面試

老師 小明 買豆漿 
面向過程：
 1，老師喊小明過來
 2，小明過來
 3，告訴小明去買豆漿
 4，給你錢，告訴你記住找零錢
 5，小明下樓到永和
 6，小明排隊
 7，小明和營業小妹 溝通 買豆漿 給錢
 8，營業員 收錢，找零 準備豆漿
 9，小明等待  
 10，營業員給豆漿
 11，小明拿豆漿 回來
 12，給老師 零錢給老師
面向對象：
 三個主體 老師 小明 和 營業員
 老師:{
  名字:"tony",
  act1(){
   xxxx
  }
  xxxx
  xxxx
 }
 小明：{
  
 }
 營業員{
 
 }
棋盤

面向對象優勢：方便代碼的管理，和封裝以及調用

面向過程

將程序 全部步驟：拆成一步一步
怎麼將大象賽進冰箱
1，打開冰箱門
2，放進大象
3，關門

如何建立對象

1，字面量編程

var obj = {
 屬性:值,
 屬性2:值2,
 方法:function(){
  
 }
}
使用屬性和方法
obj.屬性名
obj.方法名
賦值
obj.屬性名 = 值
obj.方法 = function(){}

2，系統構造函數（建立對象） Object數組

var obj = new Object();
obj.屬性=值
....

3,工廠函數建立對象函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    

    <script>
        function createObj(name,age,gender){
            var obj = {};
            obj.name = name;
            obj.age = age;
            obj.gender = gender;
            return obj;
       }
        var p1 = createObj("小明",12,"男");
        console.log(p1);
        var p2 = createObj("小h",20,"女");
        console.log(p2);
        /*
       工廠函數：
           有原材料 
           有流水線
           出來成本
       */ 
    </script>
</body>
</html>

4,構造函數建立對象 ui

問題：this

函數怎麼調用：函數名()spa

另外一種方法： new 函數名()prototype

當new 一個函數會發生什麼？面試題code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    

    <script>
       /* 
       new 一個函數發生了什麼
       1，在函數中自動 隱式建立一個空的對象
       2，改變函數中的this指向 this指向此時 指向 這個空的對象
       3，隱式返回this 空對象
       */

        function Person(name,age,gender){
            // var obj = {}; 自動乾的
            this.name = name;
            this.age = age;
            this.gender = gender;
       }
        var p1 = new Person("小明",18,"男");
        var p2 = new Person("小紅",20,"女")
        console.log(p1);
        console.log(p2);
    </script>
</body>
</html>

注意：構造函數 通常首字母大寫 區別普通函數

系統對象：
 數組：
 var arr = new Array();
 日期
 var now = new Date();

構造函數的缺點：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
         function Person(name,age,gender){
            // var obj = {}; 自動乾的
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.act = function(){
                alert(this.name+"吃飯");
           }
       }
        var p1 = new Person("小明",18,"男");
        var p2 = new Person("小明",18,"男");
        alert(p1 == p2);  //地址是不同 
        /*
       缺點：
           每一次new一個對象， 就會在內存中從新開闢一個空間，存儲 屬性和方法
           由於每一次都從新賦值了
           大部分狀況下：方法 代碼都是相同，沒有必要從新開闢空間
       */ 
    </script>
</body>
</html>

原型

構造函數有一個屬性叫作 prototype 原型，屬性就是對象（原型空間），能夠將不一樣的對象的公共的屬性和方法放到原型上，當咱們new一個對象時，這個對象有一個屬性 __proto__指向原型空間 的

只有構造函數時：
 屬性和方法定義在 構造函數中 經過this關鍵字定義 浪費內存
 原型：
  公共的屬性和方法放到原型中 當咱們new一個實例對象 原型中的屬性和方法只會在內存中存儲一份
  實例對象中有一個屬性 __proto__自動指向 他的構造函數的原型
  原型上的屬性和方法 能夠直接經過 對象名.屬性名獲得
  
  
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
    
   <script>
       function Person(name,age){
           this.name = name;
           this.age = age;
       }

       // 原型
       Person.prototype.act = function(){
           alert(this.name+"吃飯");
       }

       var p1 = new Person("小明",16);
       p1.act();
       console.log(p1);
   </script>
</body>
</html>
注意：
 原型上的this指向也是 指向 實例對象的

總結：構造函數結合原型通常會在構造函數上定義屬性（理解變量），在原型中，定義方法（函數）

對象的constructor屬性獲得實例對象的構造函數

instanceof 判斷一個對象是否是某個構造函數的的實例

實例對象.hasOwnProperty("屬性") 判斷一個屬性是否是實例對象本身的屬性

原型鏈：

鏈：鏈式關係一環扣一環

每一個實例對象 有一個__proto__屬性，指向它的構造函數的prototype屬性
構造函數 往上也有構造函數 Function 構造函數的 __proto__指向 Function的prototype屬性
....
這種層層 的鏈式關係 叫作原型鏈

面向對象的形式 寫 選項卡：

對象 選項卡 Tab

屬性： 變量 構造函數中定義

方法：切換方法 構造函數原型

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

js 面向對象以及原型及原型鏈

面向對象

面向對象優勢：方便代碼的管理，和封裝 以及調用

面向過程

如何建立對象

原型

面向對象優勢：方便代碼的管理，和封裝以及調用