JS中的类,类的继承方法
大牛请无视此篇!
首先我们定义一个类,方法很简单,就像我们定义函数一样,只不过我们为了与函数区分,名称首字母要大写,看代码:
function Person (){ }
这就是一个很简单的Poson类,然后我们通过类来进行实例化对象,通俗的说创建对象吧,我们以前用过的json对象,和我们现在要用的标准对象
//简单的json对象(此对象与Person类没任何关系,只是让大家观察两者的写法区别)
var obj = {
name:‘lemon’,
age:'18'
}
//通过Person来实例化一个对象(对象名称相同为了对比)
var obj = new Person; //定义对象属性
obj.name = 'lemon'
//定义对象方法
obj.fn = function(){
console.log('www.lemon-x.ml')
};
//类是无法使用对象中的属性和方法的、对象也是无法使用类的方法和属性的
console.log(obj.name);
obj.fn();
//定义对象属性以及方法
Person.num = 1;
Person.fn = function(){
console.log('我是类方法')
}
//进行调用
console.log(Person.num);
Person.fn(); //我们可以通过prototype可以给这个类下面的所有对象添加一个共有的属性或方法
Person.prototype.age = 18;
Person.prototype.data = function(){
console.log(this.name+':'+this.age)
};
console.log(obj.age);
obj.data();
话不多说,看下第一种继承方法,通过拓展Object来实现继承
//父类
function Parent(add,net,no,teacher) {
this.add = add;
this.net = net;
this.no = no;
this.teacher = teacher;
}
//子类
function Child(name,age,sex,id) {
this.name = name;
this.sex = sex;
this.age = age;
this.id = id;
}
/*继承方法*/
Object.prototype.extend = function(ParentObj){
for(var i in ParentObj){
this[i] = ParentObj[i]
}
};
/*实例化子类,实例化父类,子类调用继承方法*/
var parent = new Parent(
"china","www.lemon-x.ml","1608","ccy"
);
var child = new Child("lemon","男","18","1001");
//调用我们写好的继承方法
child.extend(parent);
//现在我们就可以调用父类中的属性以及方法了
console.log(child.add); //如果看不懂看下面这个简单的
//父类
function Parent(add) {
this.add = add; }
//子类
function Child() { }
/*继承方法*/
Object.prototype.extend = function(ParentObj){
for(var i in ParentObj){
this[i] = ParentObj[i]
}
};
/*实例化子类,实例化父类,子类调用继承方法*/
var parent = new Parent("china");
var child = new Child();
//调用我们写好的继承方法
child.extend(parent);
//现在我们就可以调用父类中的属性以及方法了
console.log(child.add);
通过call 或 apply 来实现继承
//call 无参
function Person(){
this.name = 'lemon';
this.age = '18';
}
function show(){
alert(this.name+':'+this.age);
}
var p = new Person;
//通过call方法使show方法中的this指向p对象
show.call(p); //call有参
function Person2(){
this.name = 'lemon';
this.age = '18';
}
function show2(id,add){
alert(this.name+':'+this.age+','+id+','+add);
}
var p2 = new Person2;
//通过call方法使show方法中的this指向p对象
show2.call(p2,'001','山东'); //apply 无参
function Person3(){
this.name = 'lemon';
this.age = '18';
}
function show3(){
alert('apply无参:'+this.name+':'+this.age);
}
var p3 = new Person3;
//通过apply方法使show方法中的this指向p对象
show3.apply(p3); //apply有参
function Person4(){
this.name = 'lemon';
this.age = '18';
}
function show4(id,add){
alert('apply有参'+this.name+':'+this.age+','+id+','+add);
}
var p4 = new Person4;
//通过apply方法使show方法中的this指向p对象
show4.apply(p4,['001','山东']); /*通过call apply实现继承*/
//父类
function Parent(add,net,no,teacher) {
this.add = add;
this.net = net;
this.no = no;
this.teacher = teacher;
}
//子类
function Child(name,age,sex,id) {
this.name = name;
this.sex = sex;
this.age = age;
this.id = id;
//Parent.call(this,'山东','www.lemon-x.ml','001','ccy');
Parent.apply(this,['山东','www.lemon-x.ml','001','ccy']);
}
var child = new Child('lemon','18','man','002');
console.log(child.net);
JS中的类,类的继承方法的更多相关文章
- JS中常见的几种继承方法
1.原型链继承 // 1.原型链继承 /* 缺点:所有属性被共享,而且不能传递参数 */ function Person(name,age){ this.name = name this.age = ...
- js中判断数据类型的四种方法总结
js中判断数据类型的四种方法 前言 在js中,我们经常需要判断数据的类型,那么哪些方法可以用来判断数据的类型呢?哪种方法判断数据类型最准确呢? 我们来一个个分析: 1.typeof typeof是一个 ...
- js中style.display=""无效的解决方法
本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多 ...
- js中数组去重的几种方法
js中数组去重的几种方法 1.遍历数组,一一比较,比较到相同的就删除后面的 function unique(arr){ ...
- JS 中深拷贝的几种实现方法
JS 中深拷贝的几种实现方法1.使用递归的方式实现深拷贝 //使用递归的方式实现数组.对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是 ...
- js中的splice方法和slice方法简单总结
slice:是截取用的 splice:是做删除 插入 替换用的 slice(start,end): 参数: start:开始位置的索引 end:结束位置的索引(但不包含该索引位置的元素) 例如: va ...
- 用Java开发一个工具类,提供似于js中eval函数功能的eval方法
今天在看到<Java疯狂讲义>中一个章节习题: 开发一个工具类,该工具类提供一个eval()方法,实现JavaScript中eval()函数的功能--可以动态运行一行或多行程序代码.例如: ...
- Js中数据类型判断的几种方法
判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异 ...
- 判断js中的数据类型的几种方法
判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异 ...
- 转:判断js中的数据类型的几种方法
判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异 ...
随机推荐
- hibernate-Maven
1.创建Maven 2.创建Maven工程 3.然后一直下一步 4.创建成功后Maven 5.下载jra包 //hibernate <dependencies> <dependenc ...
- Python3基础 lambda表达式 简单示例
镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...
- 一个a::before的写法
#key_table table tr td a::before{//这是个a前面的蓝色小圆点 background: #48A7D9; content: "";//这 ...
- iOS 之 定时器
[NSTimer scheduledTimerWithTimeInterval:5.0 target:self selector:@selector(showMyDrivingRangeTimer) ...
- Windows server 2008 R2 64位系统安装ZendOptimizer-3.3.0a-Wind
如果不安装ZEND的话,一些PHP网站程序使用ZEND加密后就无法使用,比如DISCUZ,SHOPEX,ECSHOP等,所以要想安装这些程序,ZEND是一定要安装的,要不会出现乱码等问题. 安装ZEN ...
- Flex移动应用程序开发的技巧和窍门(四)
范例文件 flex-mobile-dev-tips-tricks-pt4.zip 这是本系列文章的第四部分,该系列文章涵盖Flex移动开发的秘诀与窍门. 第一部分关注切换视图以及切换执行应用时的数据处 ...
- aJax请求结果中包含form的问题
jsp页面a.jsp如下: <form action='login' id='formId' method='post'> <input name='user'> </f ...
- [nRF51822] 16、nRF51822的随机数生成器,及随机数生成器的一些知识(可以帮您补补随机数发生器的知识)
1.前言 随机数生成器在通信.加密.图像传输等领域应用广泛,且一般起到关键性作用.我在最近设计的一个近场射频通信协议的碰撞避退算法的过程中,便对此有深深体会. 2.伪随机数发生器 随机数发生器一般包括 ...
- 最近总当机,IT帮网站用了1天时间成功搬家
Posted on 2017年1月22日 最近一两周,IT帮的会员.BA学员和AM学员时不时反馈网站打不开.敏捷个人APP登录不了,有时候又可以但是很慢,还有的时候电信能访问而联通网络访问不了. 这个 ...
- 新年上班第一天,我的 IDE 挂了
新的一年又开始了 你年前的总结还记得么?你新年的计划做好了么?反正我都没做. 上班第一天大家都在晒着开工红包,看着一个比一个刷到的红包多,庆幸自己幸好没结婚:开心的聊着过年又被七大姑八大姨爷爷奶奶爸爸 ...