js 面向对象以及原型及原型链

时间:2019-09-03
本文章向大家介绍js 面向对象以及原型及原型链，主要包括js 面向对象以及原型及原型链使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

面向对象

是一种编程思维

所有的程序中的参与的对象提取出来，给对象 设置不同的属性和方法

老师 小明 买豆浆 
面向过程：
    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,构造函数 创建对象

问题：

函数怎么调用：函数名()

另一种方法： new 函数名()

当new 一个函数会发生什么？ 面试题

<!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
​
属性：  变量  构造函数中定义
​
方法：切换方法 构造函数原型

 

原文地址：https://www.cnblogs.com/cxf1214/p/11456266.html

随机文章
Javascript知识点必读
最近更新