JavaScript原型OOP——你上车了吗？

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

.title-bar {
width: 80%;
height: 35px;
padding-left: 35px;
color: white;
line-height: 35px;
font-size: 19px;
font-weight: bold;
background-color: #2B6695;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

本篇小分享，带有一定车技的新司机上车，老司机我带不动你，你可以带带我。版权归博客园和作者本人共同所有，转载和爬虫请注明原文地址博客园吴双www.cnblogs.com/tdws

对新司机说：JavaScript原型链对于你我这样的新司机总显得神秘不好理解,但在你成为老司机的路上，你不得不去搞一搞，或许你很少有机会来使用它，不过我想说机会总是留给有准备的人，就是这样一个个小的代码插曲，让你我一起成为真正的老司机。今天，就上一次车：

百度百科中，这样描述了property:在JavaScript中，prototype对象是实现面向对象的一个重要机制。每个函数就是一个对象（Function），函数对象都有一个子对象 prototype对象，类是以函数的形式来定义的。prototype表示该函数的原型，也表示一个类的成员的集合。

实践中理解

那么我在浏览器中做出如下实验：

你可以看到我定一个Test“类型”. 我使用typeof获取Test“类型”的类型结果为function,结果告诉我们他是一个类。下面我又继续获取Test.prototype的类型，也就是原型的类型，结果为object,告诉我们这是一个对象。如果你看过我上一篇http://www.cnblogs.com/tdws/p/5944254.html闭包的分享，在对象中附加了一系列方法和属性，你就理解什么是object. 既然我们知道这是一个对象，我们就可以向对象上做一系列的操作了。请看代码：

自己写一遍收获更多哟

<script>

        //来两个参数>>品牌,型号

        function Car(carBrand, model) {

            this.carBrand = carBrand;

            this.model = model;

        }

        //来一个方法>>加速方法

        Car.prototype.Acceleration = function () {

            console.log("this is " + this.carBrand + '--' + this.model);

        }

        //再来一个方法>>按喇叭

        Car.prototype.Hoot = function () {

            console.log("嘀嘀嘀");

        }

        //来一个属性>>轮子数量

        Car.prototype.Wheel = 4;

        //特斯拉>>来三个参数>>品牌,型号,动力

        function Tesla(carBrand, model ,power) {

            Car.call(this, carBrand, model);

            this.power = power;

        }

        Tesla.prototype = Object.create(Car.prototype);//创造一个空对象，并且使其原型指向参数，也就是Car.prototype.

        Tesla.prototype.constructor = Tesla;  //取消不影响整体流程，但为了保持一致  特斯拉构造，如果没有此行代码，则constructor为Car

        Tesla.prototype.Acceleration = function () {

            console.log("this is " + this.carBrand + '--' + this.model+" And Drive by "+this.power);

        }

        //特斯拉独有的  GetGirl你懂的方法

        Tesla.prototype.GetGirl = function () {

            console.log('yes,fucking car...');

        }

        //特斯拉 modelX 电动

        var modelX = new Tesla("Tesla", "ModelX", "electric power");

        console.log(typeof modelX);

        modelX.Acceleration();

        console.log(modelX.Wheel);

        modelX.GetGirl();

        modelX.Hoot();

        console.log(Tesla.prototype.constructor);

    </script>

在代码中我做了一系列注释，也开了一把特斯拉。我定义了Car这个类型，并且在得到Car的对象的时候你需要两个参数，品牌和型号。有一个加速，一个鸣笛的方法。下面我希望特斯拉能继承Car的基础方法和属性。继而我定义了Tesla类型，并且在其中通过call调用父类的方法，你可能在此处看不到这个调用有什么意义，因为Car类型中不过只是赋值而已，如果真是做一系列的复杂逻辑操作后赋值（车辆生产），那就会感受到用处啦。

输出开车结果

看一下输出结果，不用问为什么，继续往下看。