`
smiky
  • 浏览: 257809 次
  • 性别: Icon_minigender_1
  • 来自: 天门
社区版块
存档分类
最新评论

javascript里面的继承

阅读更多

/**
 * 构造对象
 * 通过构造函数操作this构造出的对象,不但具有各自的成员数据还有各自的方法数据,即方法的代码体在每个对象中都存在着一个副本
 * 也就是说每个对象是调用自己的方法,而不是像java等语言中所有对象都是调用的同一个方法的引用,
 * 即每个对象的方法的引用是不同的,尽管它们的逻辑是一样的
 * */

 

function Student(name){
 this.name = name;
 this.say = function(){
  alert(this.name);
 };
}

function Compute_Student(name,subject){
 Student.call(this,name);
 this.subject = subject;
 this.hello = function(){
  alert(this.name+" "+this.subject);
 };
}

var student = new Student("李四");
var compute_student = new Compute_Student("张三","物理");
student.say();
compute_student.say();
compute_student.hello();
alert(student.constructor==Student);
alert(compute_student.constructor==Compute_Student);
alert(student.say == compute_student.say);//false

 

//改进

function jump(){
 alert(this.name +" 跳啦");
}

function Human(name){
 this.name = name;
 this.jump = jump;
}

var human1 = new Human("王五");
var human2 = new Human("赵六");
human1.jump();
human2.jump();
alert(human1.jump == human2.jump);//结果为true

 
//缺点是看不出jump与Human的关系

 

继续改进使用prototype

 /**
  * prototype chain
  * 我们定义的对象都是继承自Object对象,Object.prototype的属性可以被我们定义的对象使用
  * 那么自定义的对象如何继承其它的类呢  myclass.prototype = new Object()相当于将myclass继承于Object,
  * 继承之后,myclass生成的对象可以使用Object.prototype里面的属性
  * */
 

function Worker(name){
  this.name = name;
 }
 Worker.prototype.say = function(){
  alert("我的名字是:"+this.name);
 };
 
 function Employee(name,age){
//  this.superclass(name);为什么不对
  Worker.call(this,name);
  this.age = age;
 }
// Employee.prototype.superclass = Worker;
 Employee.prototype = new Worker();//构成prototype chain
 Employee.prototype.goodbye = function(){
  alert(this.name+"年龄"+this.age+" goodbye");
 };
 var employee = new Employee("smiky",25);
 var worker = new Worker("monoxide");
 employee.goodbye();
 employee.say();
 alert(employee.say == worker.say);

 

/**
 * javascript用构造函数构造对象的步骤:
 * 1.新建一个对象new Object();
 * 2.将该对象内置的原型对象设置成构造函数引用的原型对象
 * 3.将该对象作为this参数调用构造函数
 * */
 
 /**
  * 基于上面的步骤,测试一
  * 构建一个对象(作为prototype对象使用),将其引用替代某构造函数的prototype对象
  * 即用prototype对象来描述类
  * */

 function Test1(){}
 var Cat = {
  init : function(name,age){
   this.name = name;
   this.age = age;
  },
  say : function(){
   alert("我的名字是:"+this.name +"  年龄:"+this.age);
  }
 };
 Test1.prototype = Cat;
 var test1 = new Test1();
 test1.init("小王",30);
 test1.say();

 
 /**
  * 这里的Test1感觉就是个过渡,什么作用都没有起到,这里的test1不管怎么样看都是Cat
  * 可能有人会想,那么我用var obj = new Object()构建一个对象,然后将这个对象的prototype属性找成自己需要的
  * 不就行了吗?
  * 问题在于无法获取到对象的prototype对象
  * */

 

/**
  * 更上一层楼,既然无法获取到prototype,那么我们是否可以构建一个通用的函数,
  * 将所需要的用于构建对象的临时function(如上面的Test1)内嵌
  * */
 

function Class(prototype,params){//根据传递进来的原型对象构建对象
  function new_(){
   prototype.init.apply(this,params);
  };
  new_.prototype = prototype;
  return new new_();
 }
 //定义用于述Dog的prototype对象
 var Dog = {
  init : function(name,age){
   this.name = name;
   this.age = age;
  },
  speak : function(){
   alert(this.name +" "+this.age);
  }
 };
 var dog = Class(Dog,["旺旺",2]);
 dog.speak();
 Dog.swim = function(){
  alert(this.name +"在游泳哦");
 };
 dog.swim();

 

/**
  * 最终版
  * */

 var object =//定义一个基础类,所有的类都继承自它
 {
  isClass : function(type)
  {
   var self = this;
   var _type = this.Type;
   if(_type == type)
   {
    return true;
   }
   return false;
  }
 };
 
 function CreateClass(superclass,classDefination){
  function class_(){
   this.Type = superclass;
   for(var obj in classDefination)//将类定义中的属性全部设定会当前生成的对象
   {
    this[obj]=classDefination[obj];
   }
  }
  class_.prototype = superclass;//将当前的prototype设成基类,构建prototype关联
  return new class_();//返回构建的对象
 }
 
 function CreateObject(prototype,params)//根据给定的类构建对象
 {
  function new_(){
   prototype.init.apply(this,params);//类中必须有个init方法专门用于被始化对象
  }
  new_.prototype = prototype;
  return new new_();
 }
 
 var Animal = CreateClass(object,//购建一个Animal类
  {
   init : function(type)
   {
    this.type = type;
   },
   song : function()
   {
    alert(this.type+"在唱歌哦");
   }
  }
 );
 
 var Mouse = CreateClass(Animal,//购建一个Mouse类
  {
   init : function(type,name)
   {
    Animal.init.apply(this,["老鼠"]);
    this.name = name;
   },
   eat : function()
   {
    alert(this.type+" "+this.name+"在吃东西哦");
   }
  }
 );
 
 var mouse = this.CreateObject(Mouse,["","小白"]);
 var animal = this.CreateObject(Animal,["猫"]);
 mouse.song();
 mouse.eat();
 animal.song();
 alert(animal.song == mouse.song);//true说明Mouse与Animal的对象调用的是同一个方法的引用

  
 /**
  * 可能对this会产生迷惑,this表示当前调用该方法的对象,而且同prototype一样,也存在着一个this chain
  * */
 function this_test(){
  this.alert('abc');//那么此方法在执行时,该方法体内并没有alert方法,
      //那么它就会向上一级的对象中查找alert,谁有alert,this将代表谁,如这里代表window
 } 

分享到:
评论

相关推荐

    Javascript 里面是打包的东西

    对象是由属性和方法组成的,而原型是JavaScript实现继承的关键机制。理解原型链、构造函数以及`new`关键字的作用对于深入学习JavaScript至关重要。 3. **DOM操作**:DOM(文档对象模型)是HTML和XML文档的编程接口...

    JavaScript继承与聚合实例详解

    本文实例讲述了JavaScript继承与聚合。分享给大家供大家参考,具体如下: 一、继承 第一种方式:类与被继承类直接耦合度高 1. 首先,准备一个可以被继承的类(父类),例如 //创建一个人员类 function Person(name)...

    深入理解javascript原型链和继承

    在上一篇文章中,介绍了原型的概念,了解到在javascript中构造函数、原型对象、实例三个好基友之间的关系:每一个构造函数都有一个“守护神”——原型对象,原型对象心里面也存着一个构造函数的“位置”,两情相悦,...

    JavaScript中的几种继承方法示例

    1.原型链继承 原理: 子类原型指向父类实例对象实现原型共享,即Son.prototype = new Father()。 这里先简单介绍下原型 js中每个对象都有一个__proto__属性,这个属性指向的就是该对象的原型。js中每个函数都有一个...

    聊聊JavaScript如何实现继承及特点

    “继承”是面向对象编程里面经常提及到的概念,它的目的是实现代码复用。JavaScript并没有“类”的概念,那么,它如何实现继承呢? (ES6有关键字class和extend,继承的语法与Java等面向对象语言类似,但是,ES6 ...

    Javascript 继承实现方式

    面向对象与基于对象  几乎每个开发人员都有面向对象语言(比如C++、... 这里面有一些有趣的特性,比如JavaScript中所有事物都是对象, 包括字符串、数组、日期、数字,甚至是函数,比如下面这个例子: var doc; //

    JavaScript 继承的实现

    面向对象与基于对象 几乎每个开发人员都有面向对象语言... 这里面就有一些有趣的特性,比如JavaScript中所有事物都是对象, 包括字符串、数组、日期、数字,甚至是函数,比如下面这个例子: // 定义一个函数 – add

    javascript面向对象技术基础

    除了原型继承和ES6的类继承,JavaScript还支持其他继承模式,如寄生组合式继承、原型式继承、委托继承等。每种方式都有其优缺点,开发者可以根据项目需求选择合适的继承策略。 总之,JavaScript的面向对象技术是其...

    javascript入门经典第三版 里面的例题!!

    6. **面向对象编程**:JavaScript支持基于原型的面向对象编程,包括构造函数、原型链、继承和封装。例题会引导你理解这些概念,并创建复杂的对象模型。 7. **ES6新特性**:ECMAScript 6(ES6)引入了许多新的语法...

    JavaScript_docsgithubcom的开源仓库.zip

    3. 原型继承:JavaScript采用原型链实现对象的继承,每个对象都有一个内部属性`[[Prototype]]`,可以通过`__proto__`或`Object.getPrototypeOf`访问。 4. 异步编程:JavaScript的事件循环和回调函数机制使得它非常...

    JavaScript 继承详解(一)

    面向对象与基于对象 几乎每个开发人员都有面向对象语言... 这里面就有一些有趣的特性,比如JavaScript中所有事物都是对象, 包括字符串、数组、日期、数字,甚至是函数,比如下面这个例子: // 定义一个函数 – add

    JavaScript 继承详解 第一篇

    面向对象与基于对象 几乎每个开发人员都有面向对象语言... 这里面就有一些有趣的特性,比如JavaScript中所有事物都是对象, 包括字符串、数组、日期、数字,甚至是函数,比如下面这个例子: // 定义一个函数 - add f

    若干javascript代码资源

    JavaScript7eScripts这个文件名可能表示这是一个第七版的JavaScript脚本集合,暗示了里面可能包含了一些经过更新和优化的代码示例。学习这些示例,你可以深入理解以下关键知识点: 1. **变量与数据类型**:...

    JavaScript_就是漂亮的开源图标.zip

    此外,JavaScript还支持原型继承和闭包,这些都是其独特且强大的特性。 JavaScript在前端开发中的应用非常广泛,例如用于表单验证、页面动态效果、Ajax异步通信等。随着Node.js的出现,JavaScript也能够用于服务器...

    javascript源码大全.rar

    其中包含的"javascript源码大全.chm"文件可能是一个帮助文档,里面详细介绍了各种JavaScript代码效果和实现方法。 JavaScript的核心知识点包括: 1. **基础语法**:JavaScript的基础语法类似于C语言,包括变量、...

    JavaScript继承学习笔记【新手必看】

    JavaScript作为一个面向对象语言(JS是基于对象的),可以实现继承是必不可少的,但是由于本身并没有类的概念,所以不会像真正的面向对象编程语言通过类实现继承,但可以通过其他方法实现继承。实现继承的方法很多,...

    javaScript就这么回事.doc

    JavaScript是一种广泛应用于网页和网络应用开发的编程语言,它的核心在于动态类型、原型式继承、基于原型的对象和函数作为一等公民。以下是一些JavaScript的基础知识点: 1. **创建脚本块**:在HTML中,你可以通过`...

    javascript

    这里面有几个很经典的javascript例,很适合初学者理解javascript的封装,继承,多类等一些面向对象的概念.

    JavaScript实现功能全集

    JavaScript是一种广泛应用于Web开发的脚本语言,主要在客户端...文件中的".chm"格式通常是指Microsoft的编译的帮助文件,里面可能包含详细的教程、示例代码和互动练习,帮助学习者深入理解和应用这些JavaScript技术。

    javascript源码大全

    原型是JavaScript中实现继承的核心机制,原型链则构成了对象之间的继承关系。 事件处理是JavaScript与用户交互的关键,包括事件监听、事件触发和事件冒泡。DOM(文档对象模型)操作也是JavaScript的一大应用,用于...

Global site tag (gtag.js) - Google Analytics