详解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 相关文章推荐
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
Vue和React有哪些区别
Sep 12 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
ThinkPHP发送邮件示例代码
2016/10/08 PHP
Laravel下生成验证码的类
2017/11/15 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
python的re模块应用实例
2014/09/26 Python
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
Python测试模块doctest使用解析
2019/08/10 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
美国时尚女装在线:Missguided
2016/12/03 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
感谢信
2019/04/11 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL