js 实现面向对象

  • 时间:2018-06-17 21:02 作者:学习编程 来源:学习编程 阅读:203
  • 扫一扫,手机访问
摘要:js是一个,嗯...能说半面向对象的语言吧,没有直接的支持,但能实现先来一个简单点的function Person(name){this.name = name;this.getName = function(){return this.name;};}这样就实现定义一个Person类,能直接new

js是一个,嗯...能说半面向对象的语言吧,没有直接的支持,但能实现

先来一个简单点的

function Person(name){

this.name = name;

this.getName = function(){

return this.name;

};

}

这样就实现定义一个Person类,能直接new:

var p = new Person('lls'); // 创立对象

p.getName(); // 调使用对象的方法

但是这样写,有一个问题,那就是每次创立对象,都会分配内存保存其中所有的属性,包括方法, 其中的变量的确需要每一个对象都创立一个新的,但是方法所有的都相同,这样做就有点白费内存了, 那么有什么好点的办法可以够处理一下呢?

下面引入一个新的概念, 原型: 在js中,每个类都有一个原型, 而原型只有一份,所有创立的对象共享一份原型

prototype: 每个类的这个属性为类的原型

Array.prototype.sum = function(){};

执行了以上的代码后, 所有的数组都会有 sum 方法


有了以上前提,即可以处理类方法的问题了,如下所示

function Person(name){

this.name = name;

}

Person.prototype.getName = function(){

return this.name;

};

这样,一个对象就定义成功了


但是, 面对对象得有继承吧,不可以只可以定义类而不可以实现继承,那么在js中又如何实现继承呢

思路如下:

  • 在构造函数中调使用父类的构造方法, 这样父类的属性就已经拿到了
  • 获取父类的原型, 拿到父类的方法
  • 定义自己的属性和方法

思路有了,下面使用代码实现

function Worker(name, job){

Person.call(this, name); // 调使用父类构造方法, 其中this是Worker对象

this.job = job; // 定义自己的属性

}

Worker.prototype = Person.prototype; // 获取父类的原型

Worker.prototype.getJob = function(){ // 定义自己的方法

return this.job;

};

但是这样,又有一个问题,那就是 Worker 的原型一变, 父类的原型也变了, 由于直接赋值拿到的是原型的引使用,即指针,那么就要讲原型整体复制过来才行, 用for循环实现:

for(var i in Person.prototype){

Worker.prototype[i] = Person.prototype[i];

}


同时能用 数组等实现对方法的分类管理, 如下:

var a={};

a.abc = {// 定义方法

aa: function(){},

bb: function(){}

};

a.bcd={

aa: function(){};

bb: function(){};

};

a.abc.aa(); // 调使用方法

a.bcd.aa();

如此,基本实现继承功可以,更多功可以还有待我学习

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】淘码库,据消息称已被调查。淘码库源码网,已经无法访问!(2020-01-14 04:13)
【系统环境|服务器应用】Discuz隐藏后台admin.php网址修改路径(2019-12-16 16:48)
【系统环境|服务器应用】2020新网站如何让百度快速收录网站首页最新方法,亲测有用!免费(2019-12-16 16:46)
【系统环境|服务器应用】Discuz发布帖子时默认显示第一个主题分类的修改方法(2019-12-09 00:13)
【系统环境|软件环境】Android | App内存优化 之 内存泄漏 要点概述 以及 处理实战(2019-12-04 14:27)
【系统环境|软件环境】MySQL InnoDB 事务(2019-12-04 14:26)
【系统环境|软件环境】vue-router(单页面应用控制中心)常见用法(2019-12-04 14:26)
【系统环境|软件环境】Linux中的Kill命令(2019-12-04 14:26)
【系统环境|软件环境】Linux 入门时必学60个文件解决命令(2019-12-04 14:26)
【系统环境|软件环境】更新版ThreeJS 3D粒子波浪动画(2019-12-04 14:26)
手机二维码手机访问领取大礼包
返回顶部