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(),接下来主要比较一下这几种方法的异 ...
随机推荐
- 隐马尔可夫模型(HMM)原理
本文主要讨论隐马尔科夫模型的三大要素,三大假设和三大问题. 1.引入 隐马尔可夫模型是一个关于时序的概率模型,它描述了一个由隐藏的马尔可夫链生成状态序列,再由状态序列生成观测序列的过程.其中,状态之间 ...
- C#键盘事件处理(来源网上)
C#键盘事件处理 如果你希望用户按F1弹出chm帮助,代码如下: private void FrmMain_Load(object sender, EventArgs e) { this.KeyPre ...
- bzoj3571————2016——3——12(最小乘积匹配)
bzoj3571 传送门http://www.lydsy.com/JudgeOnline/problem.php?id=3571 题解: ——————来自伟大的thy大神 http://blog.c ...
- 谈谈字符集编码及gb2312、utf-8编码原理
一.基础中的基础比特位即bit,是计算机最小的存储单位.以0或1来表示比特位的值.Byte是字节数,bit是位数,在计算机中每八位为一字节,也就是1Byte=8bit:Byte和bit都翻译成比特,俗 ...
- CentOS下架设VNC服务器
CentOS下架设VNC服务器1.什么是VNC服务器?百度百科:VNC (Virtual Network Computer)是虚拟网络计算机的缩写.它 是一款优秀的远程控制工具软件,由著名的 AT&a ...
- dp中表示无限取的写法
dp[i][j]=dp[i-a[i][j]+dp[i-a[i]][j-1]; 其中前一项j不变表示j这一项无限取
- 全面解析Bootstrap图片轮播效果
http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...
- 使用DatePickerDialog、TimePickerDialog
DatePickerDialog与TimerPicker的功能比较简单,用户也简单,只要如下两步即可. ①通过new关键字创建DatePickerDialog.TimePickerDialog实例,调 ...
- Spring mvc基本原理
http://blog.csdn.net/xtu_xiaoxin/article/details/8796499 http://www.cnblogs.com/wawlian/archive/2012 ...
- java 调用webservice的各种方法总结,wsimport方法总结
http://www.blogjava.net/zjhiphop/archive/2009/04/29/webservice.html wsimport生成webservice客户端: wsimpor ...