关键词:
## 继承性 ##
js不是一门完全是面向对象的语言,它没有专门实现对象继承的机制,但是可以通过语法层面实现对象的继承,要实现继承可以通过以下几种方式实现继承。
(这里也可以通过ES6中的class语法实现继承,更接近传统语言如java,请见我ES6新特性)
2.通过constructor实现传值。
3.类Class的概念:构造函数
通过构造函数产生的对象叫做实例。具备构造函数的所有属性
将公用的方法和属性,提取出来存到原型上
继承的几种方式
1.通过原型实现继承
function Father(){
this.name = ‘zhangsan‘;
this.age = 12;
this.gender = ‘mail‘;
this.sayHello = function(){
console.log(‘hello,i m ‘+this.name +‘,i m ‘+this.age+‘years old‘)
}
}
function Child(){};
Child.prototype = new Father();
var c1 = new Child();
c1.sayHello()
2.传参数的原型式继承
function Father(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
//定义父对象
Father.prototype.sayHello = function(){
console.log(‘hello,i m ‘+this.name +‘,i m ‘+this.age+‘years old‘)
}
function Child(name,age,gender){
this.constructor(name,age,gender)
// 将参数传给constructor
};
Child.prototype = new Father();
var c1 = new Child(‘zhangsan‘,40,‘femail‘);
c1.sayHello()
**存在的问题:该方法是采用的原型覆盖的方法,会继承父元素的所有属性,但是如果父元素不具备某些子元素特有的原型属性的话。就会丢失该属性。**
3.对象冒充
将某一个构造函数当做普通函数调用,执行后会生成指向当前对象
function Father(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
Father.prototype.sayHello = function(){
console.log(‘hello,i m ‘+this.name +‘,i m ‘+this.age+‘years old‘)
}
function Child(name,age,gender){
this.newObj = Father;//这句话是重点
this.newObj(name,age,gender)
//这里将Father函数当成一个普通函数,执行后会产生一个对象,着就是对象冒充
delete this.newObj
};
var c1 = new Child(‘lis‘,40,‘femail‘);
console.log(c1.name)
**问题:该方式不能继承Father原型上的属性。 **
4.通过call和apply手动改变this的指向,原理:(对象冒充)
function Father(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
Father.prototype.sayHello = function(){
console.log(‘hello,i m ‘+this.name +‘,i m ‘+this.age+‘years old‘)
}
function Child(name,age,gender){
Father.call(this,name,age,gender)
//这句话是关键,将Father里的所有this都指向Child
};
var c1 = new Child(‘zhangsan‘,40,‘femail‘);
c1.sayHello()
** 问题:因为实质是对象冒充,所以也不能继承Father的原型**
5.组合式继承(混合)
function Father(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
Father.prototype.sayHello = function(){
console.log(‘hello,i m ‘+this.name +‘,i m ‘+this.age+‘years old‘)
}
function Child(name,age,gender){
Father.call(this,name,age,gender)
};
//这里不仅用对象冒充用了Father这个构造函数,
//还继承了Father的prototype
Child.prototype = Father.prototype;
var c1 = new Child(‘lis‘,40,‘femail‘);
console.log(c1)
c1.sayHello()
javascript高级面向对象--最简单的继承方式,混入mix
说明(2017.3.30):1. 最简单的继承方式,混入mix1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>Document</title>6</head>7<body>8<scripttype=" 查看详情
javascript面向对象-继承
JavaScript虽然不是面向对象的语言,但是我们通过构造可以让其支持面向对象,从而实现继承、重写等面向对象的特性。具体代码如下://创建类PersonfunctionPerson(age,name){this.age=age;this.name=name;this.sayHello=function(){console.log("大人大家... 查看详情
浅谈javascript的面向对象程序设计
本文继续讲解JavaScript的面向对象程序设计。继承是面向对象语言中的一个基本概念,面向对象语言支持两种继承实现方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。但是在JavaScript中... 查看详情
javascript面向对象原型继承
<scripttype="text/javascript"> //原型链继承functionshape(){this.name="shape";this.showname=function(){console.log(this.name);}}functionshape_Two(){this.name=‘shape_Two‘}functionTriangle(side,height 查看详情
javascript面向对象和继承
我相信,当你读完这篇100%原创文章时,javascript面向对象和继承轻松拿下不再是问题。统一的html和css<divid="app"></div>#app{position:relative;width:500px;height:500px;background:#ccc;} 第一,面向对象是什么,为什么需要它。 这里... 查看详情
javascript面向对象--继承
1//继承:ECMAScript只支持实现继承依靠原型链来实现2//一、原型链3//先来理清下关系:4//每个构造函数都会有一个原型对象Person-->prototype5//每一个原型对象都会有一个指向构造函数的指针Person.prototype.constructor-->Person6//每一个... 查看详情
javascript面向对象编程:构造函数的继承
原文链接:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html总结对象之间继承的5种方法:比如,现在有一个"动物"对象的构造函数。 functionAnimal(){ this.species="动物"; }还有一个"猫"对象的构造函数。... 查看详情
javascript面向对象:构造函数的继承
这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例。今天要介绍的是,对象之间的"继承"的五种方法。比如,现在有一个"动物"对象的构造函数。 functionAnimal(){ this.species="动物"; ... 查看详情
javascript面向对象:非构造函数的继承
这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承"。今天是最后一个部分,介绍不使用构造函数实现"继承"。一、什么是"非构造函数"的继承?比如,现在有一个对象,叫做"中国人"。 varChinese={ ... 查看详情
对象的概念——javascript面向对象高级
什么是对象? a.对现实事物的抽象 —面向对象是对现实事物的抽象 b.对数据的封装 —是对具体数据的封装,是一堆属性和方法的集合对象的三大特征(封装、继... 查看详情
javascript面向对象编程:非构造函数的继承
转载自:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html 一、什么是"非构造函数"的继承?比如,现在有一个对象,叫做"中国人"。 varChinese={ nation:‘中国‘ };还有一个对象,叫做"医生"... 查看详情
javascript面向对象系列第三篇——实现继承的3种形式
...指在原有对象的基础上,略作修改,得到一个新的对象。javascript主要包括类式继承、原型继承和拷贝继承这三种继承方式。本文是javascript面向对象系列第三篇——实现继承的3种形式 类式继承 大多数面向对象的编... 查看详情
快速理解javascript面向对象编程—原型继承
总的来说js语言就是门面向对象编程的语言,对象这个概念几乎贯穿了整个js的学习。 对象 创建对象两种方法:(若要生成对象实例必须调用构造函数) 1、varobj={name:"jer",age:12};(在js内部调用了预设的Object()构... 查看详情
javascript面向对象编程:构造函数的继承
作者: 阮一峰日期: 2010年5月23日这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例。今天要介绍的是,对象之间的"继承"的五种方法。比如,现在有一个"动物"对象的构造函数。 ... 查看详情
javascript面向对象编程:非构造函数的继承
什么叫非构造函数的继承?比如,现在有一个对象,叫做"中国人"。 varChinese={ nation:‘中国‘ };还有一个对象,叫做"医生"。 varDoctor={ career:‘医生‘ }请问怎样才能让"医生"去继承"中国人"... 查看详情
javascript面向对象编程:非构造函数的继承
今天是最后一个部分,介绍不使用构造函数实现"继承"。一、什么是"非构造函数"的继承?比如,现在有一个对象,叫做"中国人"。1 varChinese={2 nation:‘中国‘3 };还有一个对象,叫做"医生"。 1 varDoctor={2 ... 查看详情
javascript面向对象编程:非构造函数的继承
作者: 阮一峰日期: 2010年5月24日这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承"。今天是最后一个部分,介绍不使用构造函数实现"继承"。一、什么是"非构造函数"的继承?比如,现在有一个... 查看详情
javascript面向对象编程:非构造函数的继承
原文链接:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html作者: 阮一峰这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承"。今天是最后一个部分,介绍不使用构造函数实现"... 查看详情