javascript 面向对象和继承

我相信,当你读完这篇100%原创文章时,javascript 面向对象和继承轻松拿下不再是问题。

统一的html和css

       <div id="app"></div>
        #app{
            position: relative;
            width:500px;
            height:500px;
            background: #ccc;
        }

  

第一,面向对象是什么,为什么需要它。

  这里有另外一个词,叫面向过程。先理解这个,比如我们需要用js写出一个div自由降落的效果。我们自然而然是手动创建一个div,并且赋予它大小颜色位置做出运动。ok,这个问题不大,相信每个人都能搞定。

var app = document.getElementById(‘app‘);
var div = document.createElement(‘div‘);
var count = 0;
div.style.position = ‘absolute‘;
div.style.width = 20 + ‘px‘;
div.style.height = 20 + ‘px‘;
div.style.background = getColor();
app.appendChild(div);
requestAnimationFrame(rectMove)
function rectMove() {
	requestAnimationFrame(rectMove)
	div.style.top = (count++) + ‘px‘;
	if(div.offsetTop>480){
		app.removeChild(div)
	}
}
function getColor(){
	return ‘#‘+Math.floor(Math.random()*10)+Math.floor(Math.random()*10)+Math.floor(Math.random()*10);
}

  

  然而,第二天产品说要源源不断的div(不同颜色,大小相同)自由降落,这时,我们脑袋就大了,难道要for循环几千上万个div?貌似不妥啊,小的做不到啊。。这就是面向过程的写法和弊端。

  这时候就需要面向对象的方法了。也就是用一个function,生成源源不断的对象,这些对象大部分属性方法都相同(比如大小相同),个别属性方法特殊(比如颜色不同)。

var app = document.getElementById(‘app‘);
var rects = [];
var count = 0;
function Rect1(width,height,x,backColor){
       this.speed = -1;      this.x = x;
	this.width = width;
	this.height = height;
	this.backColor = backColor;
}
Rect1.prototype.move = function(){
	this.nodeName.style.top = (this.nodeName.offsetTop - this.speed) + ‘px‘;
};
function addChild(obj){
	var ele = document.createElement(‘div‘);
	ele.style.position = ‘absolute‘;      ele.style.x = obj.x + ‘px‘;
	ele.style.width = obj.width + ‘px‘;
	ele.style.height = obj.height + ‘px‘;
	ele.style.background = obj.backColor;
	app.appendChild(ele);
	obj.nodeName = ele; //这个要注意
}
requestAnimationFrame(rectMove)
function rectMove() {
	requestAnimationFrame(rectMove)
	count++;
	if (count % 50 == 0) {
		var rect = new Rect1(20, 20,20, getColor());
		addChild(rect);
		rects.push(rect)
	}
	for (var i = 0; i < rects.length; i++) {
		rects[i].move();
		if (rects[i].nodeName.offsetTop > 480) {
			app.removeChild(rects[i].nodeName);
			rects.slice(item, 1)
		}
	}
}
function getColor(){
	return ‘#‘+Math.floor(Math.random()*10)+Math.floor(Math.random()*10)+Math.floor(Math.random()*10);
}

  

  效果不错吧,美滋滋,详细细节请看阮大神这一章封装。结论就是,面向对象最优的方法是把方法定义在prototype对象上,属性写在构造函数上。

  但是,第三天,亲的产品又来了,说要再加一列div自由的降落。有了面向对象的我们,问题不大的,手起刀落写下下面的代码。

var app = document.getElementById(‘app‘);
var rects = [];
var rects2 = [];
var count = 0;

function Rect1(width,height,x,backColor){
	this.speed = -1;
	this.x = x;
	this.width = width;
	this.height = height;
	this.backColor = backColor;
}
Rect1.prototype.move = function(){
	this.nodeName.style.top = (this.nodeName.offsetTop - this.speed) + ‘px‘;
};

//----- 新增重复的内容,第二列
function Rect2(width,height,x,backColor){
	this.speed = -1;
	this.x = x;
	this.width = width;
	this.height = height;
	this.backColor = backColor;
}
Rect2.prototype.move = function(){
	this.nodeName.style.top = (this.nodeName.offsetTop - this.speed) + ‘px‘;
};
//----- 新增重复的内容

function addChild(obj){
	var ele = document.createElement(‘div‘);
	ele.style.position = ‘absolute‘;
	ele.style.width = obj.width + ‘px‘;
	ele.style.height = obj.height + ‘px‘;
	ele.style.left = obj.x + ‘px‘;
	ele.style.background = obj.backColor;
	app.appendChild(ele);
	obj.nodeName = ele;
}
requestAnimationFrame(rectMove)
function rectMove(){
	requestAnimationFrame(rectMove)
	count++;
	if(count%50==0){
		var rect = new Rect1(20,20,20,getColor());
		addChild(rect);
		rects.push(rect)
	}
	rects.forEach(function(item,index,array){
		item.move();
		if(item.nodeName.offsetTop>480){
			app.removeChild(item.nodeName);
			rects.slice(item,1)
		}
	})

	if(count%80==0){
		var rect = new Rect2(40,40,40,getColor());
		addChild(rect);
		rects2.push(rect)
	}
	rects2.forEach(function(item,index,array){
		item.move();
		if(item.nodeName.offsetTop>480){
			app.removeChild(item.nodeName);
			rects.slice(item,1)
		}
	})
}
function getColor(){
	return ‘#‘+Math.floor(Math.random()*10)+Math.floor(Math.random()*10)+Math.floor(Math.random()*10)
}

 

    效果如上,也还能见人。但是我们担心啊,万一万恶的产品明天要第三列怎么办,把新增重复的内容再来一遍?不可能啊,这多愚蠢啊。此时,我们伟大的继承上场了啊。

var app = document.getElementById(‘app‘);
var rects = [];
var rects2 = [];
var count = 0;
//父类构造函数和方法
function Rect(width,height,x,backColor){
	this.speed = -1;
	this.x = x;
	this.width = width;
	this.height = height;
	this.backColor = backColor;
}
Rect.prototype.move = function(){
	this.nodeName.style.top = (this.nodeName.offsetTop - this.speed) + ‘px‘;
};//增加一个extend继承函数(寄生组合继承)
function extend(Parent) {
	var Child = function(){
		return Parent.apply(this, arguments);
	};
	var F = function() {};
	F.prototype = Parent.prototype;
	Child.prototype = new F();
	Child.prototype.constructor = Child;
	Child.asdasdasdasd = Parent.prototype;
	return Child;
}

var Rect1 = extend(Rect);
var Rect2 = extend(Rect);// 这里就可以继续增加各种构造函数了,然后衍生,比如第三列增加一个border-radius属性变成圆形。

function addChild(obj){
	var ele = document.createElement(‘div‘);
	ele.style.position = ‘absolute‘;
	ele.style.width = obj.width + ‘px‘;
	ele.style.height = obj.height + ‘px‘;
	ele.style.left = obj.x + ‘px‘;
	ele.style.background = obj.backColor;
	app.appendChild(ele);
	obj.nodeName = ele;
}
requestAnimationFrame(rectMove)
function rectMove(){
	requestAnimationFrame(rectMove)
	count++;
	if(count%50==0){
		var rect = new Rect1(20,20,20,getColor());
		addChild(rect);
		rects.push(rect)
	}
	rects.forEach(function(item,index,array){
		item.move();
		if(item.nodeName.offsetTop>480){
			app.removeChild(item.nodeName);
			rects.slice(item,1)
		}
	})

	if(count%80==0){
		var rect = new Rect2(40,40,40,getColor());
		addChild(rect);
		rects2.push(rect)
	}
	rects2.forEach(function(item,index,array){
		item.move();
		if(item.nodeName.offsetTop>480){
			app.removeChild(item.nodeName);
			rects.slice(item,1)
		}
	})
}
function getColor(){
	return ‘#‘+Math.floor(Math.random()*10)+Math.floor(Math.random()*10)+Math.floor(Math.random()*10)
}

  大家好好屡屡,

Rect,Rect1,Rect2三者的关系。一个爸爸两个儿子。
全部代码的地址 github。欢迎各位同学给右上角


 

原文地址:https://www.cnblogs.com/gggwf/p/8325939.html

时间: 2024-10-12 03:27:11

javascript 面向对象和继承的相关文章

javascript面向对象程序设计——继承初步(by vczero)

上一篇说了javascript的封装,没有刻意去说javascript的“共有函数”.“私有函数”,因为个人觉得这只是作用域的问题,我们不能刻意的模仿强类型语言(C++/JAVA)而去编写代码.尊重每一门语言的特性才是最为重要的. 一.基于prototype原型的继承 1 var Person = function(name, age){ 2 this.name = name; 3 this.age = age; 4 } 5 6 Person.prototype = { 7 addUser: f

JavaScript面向对象原型继承

<script type="text/javascript"> //原型链继承 function shape() { this.name="shape"; this.showname=function(){ console.log(this.name); } } function shape_Two() { this.name='shape_Two' } function Triangle(side,height) { this.name="T

JavaScript面向对象的继承应用

面向对象语言的三大特征:继承.封装.多态 <!DOCTYPE html> <html> <head> <title>Extend-OPP</title> </head> <script type="text/javascript"> function Person(name,sex){ this.name=name; this.sex=sex; } Person.prototype.showName =

javascript面向对象:继承、多态

继承 js中同样可以实现类的继承这一面向对象特性,继承父类中的所有成员(变量和属性),同时可扩展自己的成员,下面介绍几种js中实现继承的方式: 1,对象模仿:通过动态的改变 this 指针的指向,实现对父类成员的重复定义,如下: function ClassA(paramColor) { this.color = paramColor; this.sayColor = function() { alert(this.color); } } function ClassB(paramColor,

JavaScript面向对象之类的继承

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇

Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript时,可以选择面向过程的方式编程,显得高效:但在实际工作中,遇到的项目需求和框架较大的情况下,选择面向对象的方式编程显得尤其重要,Javascript原生语法中没有提供表述面向对象语言特性的关键字和语法(如extends.implement).为了实现这些面向对象的特性,需要额外编写一些代码,如下.

Javascript面向对象编程(二):构造函数的继承

这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数. function Cat(name,color){ this.name = name; this.color = col

《JavaScript》——面向对象之继承

继承是面向对象中一个比较核心的概念. 其他正统面向对象语言都会用两种方式实现继承:一个是接口实现,一个是继承.而 ECMAScript 只支持继承,不支持接口实现,而实现继承的方式依靠原型链完成.在JavaScript中的继承中,分了好几类继承,可以说是伴随着问题的出现,继承的方法也升级了,不光是原型链继承,还有组合继承.原型继承.寄生式继承.寄生组合继承等等.他们伴随着不同问题的出现而出现,下面我分别介绍一下这几种继承方式. 1.原型链式继承 <span style="font-fami

Javascript面向对象(封装、继承)

Javascript 面向对象编程(一):封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢? 一. 生成实例对象的原始模式 假定我们把猫看成一个对象,它有"名