详解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 13 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
js获取ip和地区
Mar 10 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 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
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
用JS控制回车事件的代码
2011/02/20 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
vue组件间通信解析
2017/03/01 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
通过js实现压缩图片上传功能
2020/02/25 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
写好自荐信的几个要点
2013/12/26 职场文书
父亲生日宴会答谢词
2014/01/10 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
校运会班级霸气口号
2015/12/24 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫