详解Javascript中的原型OOP


Posted in Javascript onOctober 12, 2016

前言

JavaScript原型链对于对于很多刚学习Javascript的新手们来书总显得神秘不好理解,但如果你想深入的学习Javascript,就不得不去研究以下了,或许你很少有机会来使用它,不过我想说机会总是留给有准备的人,下面我们这篇文章就来学习一下。

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

实践中理解

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

详解Javascript中的原型OOP

你可以看到我定一个Test“类型”. 我使用typeof获取Test“类型”的类型结果为function,结果告诉我们他是一个类。下面我又继续获取Test.prototype的类型,也就是原型的类型,结果为object,告诉我们这是一个对象。在对象中附加了一系列方法和属性,你就理解什么是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类型中不过只是赋值而已,如果真是做一系列的复杂逻辑操作后赋值(车辆生产),那就会感受到用处啦。

输出结果

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

详解Javascript中的原型OOP

你看到了输出》我是特斯拉ModelX,电动车。其他的输出不一一详述。

特斯拉的prototype原型指向的是一个Car原型,为什么不直接赋值呢 ?原因就是直接赋值原型时,子类原型对象的附加属性和方法,会被带到父类。

而后将Tesla的原型构造指向其本身,如果不指向本身,那么其原型构造就是Car,虽不会影响整体流程,但为了保证一致性,还是将其原型构造保持在Tesla.下面特斯拉拥有和父类同名的加速方法。也拥有了你懂的GetGirl的自身方法,你可以自己手动调用并看到父类原型对象上并没有子类的方法。

在子类调用父类同名方法时,则会选择子类的调用。而子类Tesla不拥有鸣笛方法,prototype沿着原型链向父亲查找,则可以调用父类的按喇叭方法。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
js实现抽奖效果
Mar 27 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 #Javascript
jquery自定义表单验证插件
Oct 12 #Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 #Javascript
老生常谈javascript的类型转换
Oct 12 #Javascript
vue制作加载更多功能的正确打开方式
Oct 12 #Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 #Javascript
深入理解Node.js的HTTP模块
Oct 12 #Javascript
You might like
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
php中{}大括号是什么意思
2013/12/01 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
详解参数传递四种形式
2015/07/21 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
酒店服务实习自我鉴定
2013/09/22 职场文书
环保公益广告语
2014/03/13 职场文书
小学开学典礼主持词
2014/03/19 职场文书
社会调查研究计划书
2014/05/01 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
APP界面设计技巧和注意事项
2022/04/29 杂记