JS面向对象(二)---继承

一、面向对象的继承

  1、解析:在原有对象的基础上,略作修改,得到一个新的对象,并且不影响原有对象的功能

  2、如何添加继承---拷贝继承

    属性:call

    方法: for in

/*
继承:子类不影响父类,子类可以继承父类的一些功能(代码复用)
属性的继承:调用父类的构造1函数 call
方法的继承:for in   拷贝继承
*/
//父类
function CreatePerson(name,sex){
	this.name = name;
	this.sex = sex;
}
CreatePerson.prototype.showName = function(){
	alert(this.name)
}
var p1 = new CreatePerson(‘小明‘,‘男‘)
p1.showName()   //小明

//子类
function CreateStar(name,sex,job){
	CreatePerson.call(this,name,sex);
	this.job = job;
}
//拷贝继承
extend(CreateStar.prototype,CreatePerson.prototype)
var p2 = new CreateStar("周杰伦",‘男‘,‘歌手‘);
p2.showName();    //周杰伦		

//面向对象的拷贝复制,防止影响父类对象的内容
function extend(obj1,obj2){
	for(var attr in obj2){
		obj1[attr] = obj2[attr];
	}
}

然后按照继承的方式做了一个窗口拖拽的demo,你可以狠狠的点击这里,进行查看

二、继承的其他形式(用的不是很多)

  1、类式继承 : 利用构造函数(类)继承的方式

/*js是没有类的概念的,但我们可以把构造函数看做是类,这种方式是从后端转变过来的 * */
//父类
function Aaa(){
	this.name = ‘小明‘;
}
Aaa.prototype.showName = function(){
	alert(this.name)
}

//子类
function Bbb(){}
//这句话就是类式继承
Bbb.prototype = new Aaa();
//修正指向问题
Bbb.prototype.constructor = Bbb;

var b1 = new Bbb();
b1.showName();    //小明

但实际上上面的写法还是有点问题的,假如name是一个数组的时候,父类的属性会被修改,所以例子完善后如下

/*
 1、js是没有类的概念的,但我们可以把构造函数看做是类,这种方式是从后端转变过来的
 2、要做属性和方法继承的时候,要分开继承
 * */
//父类
function Aaa(){
	this.name = [1,2,3];
}
Aaa.prototype.showName = function(){
	alert(this.name)
}

//子类
function Bbb(){
	Aaa.call(this)
}

//这个是构造函数,这个函数里面没有任何的属性与方法,避免属性继承
var F  = function(){}
F.prototype = Aaa.prototype;
//所以在B接收原型的时候,只能接收方法,不能接收属性
Bbb.prototype = new F();
Bbb.prototype.constructor = Bbb;

var b1 = new Bbb();
b1.name.push(4);

var b2 = new Bbb();
alert(b2.name);    //1,2,3

  2、原型继承 : 借助原型来实现对象继承对象

var a = {
	name : ‘小明‘
}
var b = cloneObj(a);
b.name = "小红"

alert(a.name);    //小明
alert(b.name);	  //小红

function cloneObj(obj){
	//这种方式就叫做原型继承
	var F = function(){};
	F.prototype = obj;
	return new F();
}

总结:

拷贝继承 : 通用型,有new或无new的时候都可以

类式继承: new构造函数

原型继承: 无new的对象

时间: 2024-09-30 10:03:27

JS面向对象(二)---继承的相关文章

js(面向对象,继承与原型对象)

一.定义: 程序用来描述的生活中的具体事务(对象:是封装一个事物属性与功能的程序结构):主要是用于大程序的维护 二.创建面向对象 1.自定义对象直接量(创建对象) 语法:var obj = { 属性名:属性值, ....:...., 方法名:function(){..this.属性名..}, ... } 举例:var lilei={ sname:"Li Lei", sAge:12, intr:function (){ console.log("I'm "+this.

面向对象二 — — 继承、抽象类、接口

一.继承 extends 继承的特点:Java的继承通过extends关键字来实现,实现继承的类被称为子类,被继承的类称为父类 1.参数列表必须完全与被重写的方法相同,否则不能称其为重写而是重载. 2.返回的类型必须一直与被重写的方法的返回类型相同,否则不能称其为重写而是重载. 3.访问修饰符的限制一定要大于被重写方法的访问修饰符(public>protected>default>private) 4.重写方法一定不能抛出新的检查异常或者比被重写方法申明更加宽泛的检查型异常. 用supe

JS面向对象之继承——原型链

原型对象 每个javascript对象都有一个原型对象,这个对象在不同的解释器下的实现不同.比如在firefox下,每个对象都有一个隐藏的__proto__属性,这个属性就是“原型对象”的引用. 原型链 由于原型对象本身也是对象,根据上边的定义,它也有自己的原型,而它自己的原型对象又可以有自己的原型,这样就组成了一条链,这个就是原型链,JavaScritp引擎在访问对象的属性时,如果在对象本身中没有找到,则会去原型链中查找,如果找到,直接返回值,如果整个链都遍历且没有找到属性,则返回undefi

JS 面向对象之继承 -- 借用构造函数

转自 http://www.cnblogs.com/yangjinjin/archive/2013/02/01/2889519.html 上次讲到的原型链中,原型链存在一个问题就是不能向超类型的构造函数传递参数.那么这次就是要实现如何向超类型构造函数传递参数. 这种方法我们称之为借用构造函数(constructor stealing) 这里的实现方法是使用js的原生方法apply()或all().那么先温习下apply()和all()函数的知识. call方法: 语法:call([thisObj

面向对象(二)——继承、派生、组合以及接口

一.继承与派生 1.1 什么是继承 继承是一种创建新类的方式,在Python中,新建的类可以继承一个或多个父类,父类又可称为基类或超类,新建的类称为派生类或子类 Python中类的继承分为:单继承和多继承 class People: # 定义父类 def __init__(self,name,age): self.name=name self.age=age def walk(self): print('%s is walking' %self) class Teacher(People): #

JS面向对象组件 -- 继承的其他方式(类式继承、原型继承)

继承的其他形式: •类式继承:利用构造函数(类)继承的方式 •原型继承:借助原型来实现对象继承对象 类 : JS是没有类的概念的 , 把JS中的构造函数看做的类 要做属性和方法继承的时候,要分开继承. function Aaa(){ //父类 this.name = "小明"; } Aaa.prototype.showName = function(){ alert( this.name ); }; function Bbb(){ //子类 } Bbb.prototype = new

JS 面向对象之继承--多种组合继承

转自 http://www.cnblogs.com/yangjinjin/archive/2013/02/01/2889563.html 这一次要讲 组合.原型式.寄生式.寄生组合式继承方式. 1. 组合继承:又叫伪经典继承,是指将原型链和借用构造函数技术组合在一块的一种继承方式. 下面来看一个例子: function SuperType(name) { this.name = name; this.colors = ["red", "blue", "gr

js面向对象之继承-原型继承

//animal 父类 超类 var Animal = function(name) { this.name = name; this.sayhello = function() { alert("HI,我是" + this.name + ",你愿意和我做朋友吗?"); }; }; Animal.prototype.shout = function() { alert(this.name + ",正在叫!"); }; Animal.prototy

JS面向对象之继承

1 function Person() { 2 this.name = 'Anis'; 3 } 4 Person.prototype.showName = function () { 5 alert(this.name); 6 }; 7 8 var p1 = new Person(); 9 // p1.showName(); 10 11 12 extend(PerJob.prototype, Person.prototype) 13 function PerJob() { 14 Person.c

JS面向对象(封装,继承)

在六月份找工作中,被问的最多的问题就是: js面向对象,继承,封装,原型链这些,你了解多少? 额,,,我怎么回答呢, 只能说,了解一些,不多不少,哈哈哈哈,当然,这是玩笑话. 不过之前学过java,来理解这些还是很容易的. 所以趁着自己空闲的时间,理一理,,这些,, 一.封装 1.原始方法 1 // 通过new关键字生成一个对象,然后根据javascript是动态语言的特性来添加属性和方法,构造一个对象.其中this表示调用该方法的对象. 2 var obj = new Object(); 3