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 面向对象以及原型及原型链

面向对象

面向对象优势：方便代码的管理，和封装 以及调用

面向过程

如何建立对象

原型

面向对象优势：方便代码的管理，和封装以及调用