详解Javascript中的原型OOP

前言

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

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

实践中理解

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

你可以看到我定一个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类型中不过只是赋值而已,如果真是做一系列的复杂逻辑操作后赋值(车辆生产),那就会感受到用处啦。

输出结果

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

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

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

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

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

总结

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

(0)

相关推荐

  • 前端开发必须知道的JS之原型和继承

    一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一个对象,即原型对象,也简称原型.这个函数包括构造函数和普通函数,我们讲的更多是构造函数的原型,但是也不能否定普通函数也有原型.譬如普通函数: 复制代码 代码如下: function F(){ alert(F.prototype instanceof Object) //true; } 构造函数,也即构造对象.首先了解下通过构造函数实例化对象的过程. 复制代码 代码如下: function A(x){ this.x

  • JavaScript OOP面向对象介绍

    OOP 语言使我们有能力自定义对象和变量类型. 面向对象编程 JavaScript 是面向对象的编程语言 (OOP).OOP 语言使我们有能力定义自己的对象和变量类型.对象拥有属性和方法. 属性 属性指与对象有关的值. 举例: 复制代码 代码如下: <script type="text/javascript"> var txt="Hello World!" document.write(txt.length) //使用字符串对象的长度属性来计算字符串中的

  • JavaScript OOP类与继承

    类:分为公开的和私有的 复制代码 代码如下: function Person(n){ var name=n; //私有属性 function hello(){} //私有方法一 var hello2() = function(){} //私有方法二 this.Name = "张三"; //公开成员一 this.Hello = function(){ //公开方法一 this.Name; //公开方法中可以调用私有方法与属性 name; } } Person.prototype.Age=

  • javascript prototype的深度探索不是原型继承那么简单第1/3页

    1 什么是prototype JavaScript中对象的prototype属性,可以返回对象类型原型的引用.这是一个相当拗口的解释,要理解它,先要正确理解对象类型(Type)以及原型(prototype)的概念.         前面我们说,对象的类(Class)和对象实例(Instance)之间是一种"创建"关系,因此我们把"类"看作是对象特征的模型化,而对象看作是类特征的具体化,或者说,类(Class)是对象的一个类型(Type).例如,在前面的例子中,p1和

  • js原型链原理看图说明

    当初ECMAscript的发明者为了简化这门语言,同时又保持继承的属性,于是就设计了这个链表.. 在数据结构中学过链表不,链表中有一个位置相当于指针,指向下一个结构体. 于是乎__proto__也一样,每当你去定义一个prototype的时候,相当于把该实例的__proto__指向一个结构体,那么这个被指向结构体就称为该实例的原型. 文字说起来有点儿绕,看图说话 复制代码 代码如下: var foo = { x: 10, y: 20 }; 当我不指定__proto__的时候,foo也会预留一个这

  • Javascript OOP之面向对象

    面向对象程序设计(Object-oriented programming,OOP)是一种程序设计范型,同时也是一种程序开发的方法.对象指的是类的实例.它将对象作为程序的基本单元,将程序和数据封装其中,以提高软件的重用性.灵活性和扩展性.--维基百科 一般面向对象包含:继承,封装,多态,抽象 对象形式的继承 浅拷贝 var Person = { name: 'allin', age: 18, address: { home: 'home', office: 'office', } sclools:

  • JS类定义原型方法的两种实现的区别评论很多

    我们知道,给JavaScript类添加原形(prototype)方法是很简单的.而且常用的有下面这两种方法,可是这两种方法在使用时有区别吗?     JScript Class:  复制代码 代码如下: function JSClass()   {        } Extends prototype method:  复制代码 代码如下: JSClass.prototype.MethodA = function()   { }; Or   复制代码 代码如下: function = JSCla

  • javascript 原型模式实现OOP的再研究

    复制代码 代码如下: 复制代码 代码如下: function A() { this.v1 = 10; } A.prototype.print = function() { alert(this.v1); } function B() { } B.prototype = new A(); new B().print(); 运行这段代码输出是10,看起来好像是类B继承了类A的方法print,并产生了正确的输出,实际上的执行流程是在类B生成的对象中,不能直接得到方法print,于是在它的prototy

  • JS OOP包机制,类创建的方法定义

    复制代码 代码如下: /** * 定义包 * @param {} ns * @return {} */ Xu.pkg = function(ns) { if (!ns || !ns.length) { return null; } var levels = ns.split("."); var nsobj = Xu; for (var i = (levels[0] == "Xu") ? 1 : 0; i < levels.length; ++i) { nsob

  • JS继承--原型链继承和类式继承

    什么是继承啊?答:别人白给你的过程就叫继承. 为什么要用继承呢?答:捡现成的呗. 好吧,既然大家都想捡现成的,那就要学会怎么继承! 在了解之前,你需要先了解构造函数.对象.原型链等概念...... JS里常用的两种继承方式: 原型链继承(对象间的继承)类式继承(构造函数间的继承) 原型链继承: 复制代码 代码如下: //要继承的对象var parent={name : "baba" say : function(){ alert("I am baba");}} //

随机推荐