JavaScript学习（二）——深入学习js对象的原型…

2018-07-24 08:24:37来源：博客园阅读 ()

了解对象

什么是对象？

…… 这个就不说了

对象的声明的两种方式

 1 var person = new Object(); 
 2 person.name="linchen"; 
 3 person.age="18"; 
 4 person.job="java";
 5 
 6 var person={ 
 7 name:"linchen", 
 8 age:"18", 
 9 job:"java" 
10 }

对象的数据属性和访问器属性

懒得写了，这骚操作没啥用，给出相关链接：
https://blog.csdn.net/qq_17371033/article/details/52688195

创建对象

构造函数

构造函数也是函数，是比较特殊的函数。
这种函数是用来创建对象的，就好比普通函数最后return一个对象一样。
区别在于构造函数没有显式的创建对象，直接将属性和方法赋给了this，没有return语句。

例：

//构造函数：

    // 物质（属性：质量，速度，是否生物）
    function Material(quality,speed,isLivingText) {
        this.quality = (quality||0) + "kg";
        this.speed = (speed||0) + "m/s";
        this.isLiving = isLivingText == "生物";
        this.setSpeed = function(num) {
            this.speed = num + "m/s";
        }
    }
    // 创建一个对象，需要用new关键字
    var body1=new Material(50,5,"生物");
    var body2=new Material(100,0,"非生物");

//用普通函数创建对象：

    function material(quality,speed,isLivingText) {
        var obj={};
        obj.quality = (quality||0) + "kg";
        obj.speed = (speed||0) + "m/s";
        obj.isLiving = isLivingText == "生物";
        obj.setSpeed = function(num) {
            obj.speed = num + "m/s";
        }
        return obj;
    }
    var body3=material();
    var body4=material(100,0,"非生物");

这种用函数来封装以特定接口创建对象的细节的模式被称为工厂模式
通过new关键字来创建对象的模式被称为构造函数模式

原型对象

1、任何函数都有一个属性：prototype （原型）

prototype指向一个原型对象

该原型对象包含由该构造函数创建的所有实例共享的属性和方法。

2、任何对象都有一个隐藏的属性： __proto__

__proto__属性的值指向该构造函数的原型对象。

3、任何原型对象都有一个属性：constructor （构造函数）

constructor指向该原型对象对应的构造函数。

4、原型对象也是对象，也会有一个__proto__属性

假如原型对象是另一个构造函数的实例，则形成原型链。

原型链的终点必是构造函数Object()的原型

其原型的__proto__属性值为null

5、原型对象的设置方法：

 1         // 修改单个属性或方法
 2         Material.prototype.quality="0kg";
 3         Material.prototype.setQuality = function(num) {
 4              this.quality = num + "kg";
 5         };
 6 
 7         // 初始化原型对象
 8         Material.prototype={
 9             quality:"0kg",
10             setQuality:function(num) {
11                  this.quality = num + "kg";
12             };
13         }
14 
15         // 原型对象是另一个对象的实例
16         Material.prototype=new Object();

6、原型对象是动态的，当我们对原型对象所做了任何修改都会在所有实例上反映出来。
例：

1 var body1=new Material();
2 body1.setSpeed(20); //body1.setSpeed is not a function
3 console.log(body1.speed);
4 Material.prototype.setSpeed=function(num){
5     this.speed=num+"m/s";
6 }
7 body1.setSpeed(40);
8 console.log(body1); // 40m/s

继承

什么是继承

一个对象获得另一个对象的所有属性和方法，这个操作叫做继承。

原型式继承

当构造函数a的原型等于构造函数b的实例时，形成一个原型链，通过这样的方式，a就拥有了b所有的属性和方法，这种方式叫做构造函数继承。

缺点：
a创建出来的实例的继承于b的属性和方法都是共享的，改了其中一个实例的属性值，别的实例对应的属性值也会改变。

寄生式继承

通过在构造函数a中调用构造函数b来使a拥有了b所有的属性和方法。这种方式叫做寄生式继承。

使用apply()和call()：

function B(name){
    this.name=name;
}
function A(name,age){
    B.call(this,name);
    // B.apply(this,[name])
    this.age=age;
}

apply()与call()详解：
https://blog.csdn.net/ganyingxie123456/article/details/70855586 （别人写的）

缺点：
a创建出来的实例不继承b的原型的属性和方法。如果把b的原型的属性和方法都写在b里面也就失去了函数复用的能力了。

组合继承（寄生组合式继承）

先使用寄生式继承来继承，再使用原型式继承。解决了以上两种方式各自的缺点。实例上的属性和方法会屏蔽原型上相同名的属性和方法。

demo

把下面代码复制到一个新建的.html文件，记得引入jquery，打开控制台看console

  1 <!DOCTYPE html>
  2 <html>
  3 
  4 <head>
  5 <meta charset="utf-8">
  6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7 <title>Examples</title>
  8 <meta name="description" content="">
  9 <meta name="keywords" content="">
 10 <link href="" rel="stylesheet">
 11 <script src="jquery1.42.min.js"></script>
 12 </head>
 13 
 14 <body>
 15 <div id="box1"></div>
 16 <!-- 构造函数，实例 -->
 17 <script id="js1">
 18     // 构造函数，实例--------------------------------------------------
 19     /**
 20         按照惯例：
 21             1、构造函数始终都应该以一个大写字母开头
 22             2、非构造函数则应该以一个小写字母开头
 23 
 24         与普通函数的区别：
 25             1、没有显式地创建对象
 26             2、直接将属性和方法赋给了this对象
 27             3、没有return语句
 28     */
 29 
 30     // 物质（属性：质量，速度，是否生物）
 31     function Material(quality,speed,isLivingText) {
 32         this.quality = (quality||0) + "kg";
 33         this.speed = (speed||0) + "m/s";
 34         this.isLiving = isLivingText == "生物";
 35         this.setSpeed = function(num) {
 36             this.speed = num + "m/s";
 37         }
 38     }
 39 
 40     // 这种用函数来封装以特定接口创建对象的细节的模式被称为工厂模式
 41     //  function material(quality,speed,isLivingText) {
 42     //      var obj={};
 43     //     obj.quality = (quality||0) + "kg";
 44     //     obj.speed = (speed||0) + "m/s";
 45     //     obj.isLiving = isLivingText == "生物";
 46     //     obj.setSpeed = function(num) {
 47     //         obj.speed = num + "m/s";
 48     //     }
 49     //     return obj;
 50     // }
 51 
 52     // 创建实例，得到一个新对象
 53     var body1 = new Material(50,0,"生物");
 54     console.log(body1);
 55 
 56     // 继承----------------------------------------------------------
 57     /**
 58      * 继承的方式：
 59      *  1、原型链（主要）（原型式继承）
 60      *  2、借用构造函数（寄生式继承）
 61      *  3、1和2组合继承 （寄生组合式继承）
 62      */
 63 
 64     // 设置质量的方法（原型）
 65     Material.prototype.setQuality = function(num) {
 66         this.quality = num + "kg";
 67     };
 68     // 通过对象
 69     Material.prototype.setOption = function(opt) {
 70         opt = opt || {};
 71         this.quality = (opt.quality || 0) + "kg";
 72         this.speed = (opt.speed || 0) + "m/s";
 73         this.isLiving = opt.isLivingText == "生物";
 74     };
 75     // 速度参照物（原型）
 76     Material.prototype.reference = "地球表面";
 77     body1.setQuality(25);
 78     console.log(body1);
 79 
 80     // 非生物（构造函数）
 81     function NonLivingThings() {
 82 
 83     }
 84     // 原型式继承
 85     NonLivingThings.prototype = new Material(null,null,"非生物");
 86     NonLivingThings.prototype.constructor = NonLivingThings;
 87     var nonLifeBody1 = new NonLivingThings();
 88     console.log(nonLifeBody1);
 89 
 90     // 生物（构造函数）
 91     function LivingThings() {
 92         // 寄生式继承
 93         Material.call(this,null,null,"生物"); //（call写法）
 94         // Material.apply(this, ["生物"]);（apply写法）
 95         this.lifeSpan = 0 + "年";
 96     }
 97     // 原型式继承 -- 因为前面已经实现了寄生式继承，所以实现了寄生组合式继承
 98     // LivingThings.prototype = new Material("生物");
 99     // LivingThings.prototype.constructor = LivingThings;
100     // 重写原型的setOption函数
101     // LivingThings.prototype.setOption = function() {
102     //     return function(opt) {
103     //         LivingThings.prototype.setOption.call(this, opt);
104     //         this.lifeSpan = (opt.lifeSpan || 0) + "年";
105     //     }
106     // }
107     var lifeBody1 = new LivingThings();
108     // lifeBody1.setOption({
109     //     "quality": 20,
110     //     "lifeSpan": 100
111     // });
112     console.log(lifeBody1);
113 </script>
114 <script id="js2">
115     // 创建一个对象，名为石头
116     var 石头 = new NonLivingThings("非生物");
117     石头.setOption({
118         "speed": 100
119     });
120     // 给物质添加一个run函数，传入节点，实现该节点块从左往右滑动
121     Material.prototype.run = function(dom) {
122         var $dom=$(dom);
123         $dom.css({
124                 width: "100px",
125                 height: "100px",
126                 background: "red"
127             });
128             $dom.animate({
129             marginLeft: '+500px'
130         }, (500 / parseInt(this.speed || 100)) * 1000);
131 
132     };
133     石头.run("#box1");
134 </script>
135 </body>
136 
137 </html>