详解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 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
Element Input组件分析小结
Oct 11 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
详解Node.js如何处理ES6模块
May 15 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
php 结果集的分页实现代码
2009/03/10 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
教你如何使用php session
2013/10/28 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
python如何重载模块实例解析
2018/01/25 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
管理学专业个人求职信范文
2013/09/21 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
心灵点滴观后感
2015/06/02 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python