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);
时间: 2024-07-30 20:29:02

JS中的类,类的继承方法的相关文章

js中test,exec和match方法

js中test,exec和match方法 转载▼ 标签: 杂谈 分类: jsp test test 返回 Boolean,查找对应的字符串中是否存在模式. var str = "1a1b1c";var reg = new RegExp("1.", "");alert(reg.test(str)); // true exec exec 查找并返回当前的匹配结果,并以数组的形式返回. var str = "1a1b1c";var

js中数组去重的几种方法

js中数组去重的几种方法         1.遍历数组,一一比较,比较到相同的就删除后面的                 function unique(arr){                         for(var i=0;i<arr.length;i++){                                 for(var j=i+1;j<arr.length;j++){                                         if(ar

js中style.display=&quot;&quot;无效的解决方法

本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多的操作,但如果我们style.display=""可能导致没有效果. 看下面一段代码: 复制代码代码如下: <style> #name {     display:none; }</style></head><body><div id=

JS中的call()方法和apply()方法用法总结

JS中的call()方法和apply()方法用法总结  : 参考   :     https://blog.csdn.net/ganyingxie123456/article/details/70855586 原文地址:https://www.cnblogs.com/wfblog/p/9169026.html

JS 中深拷贝的几种实现方法

JS 中深拷贝的几种实现方法1.使用递归的方式实现深拷贝 //使用递归的方式实现数组.对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝,对象的话进行对象拷贝 var objClone = Array.isArray(obj) ? [] : {}; //进行深拷贝的不能为空,并且是对象或者是 if (obj && typeof obj === "object") { for (key i

判断js中的数据类型的几种方法

判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异同. 先举几个例子: 1 var a = "iamstring."; 2 var b = 222; 3 var c= [1,2,3]; 4 var d = new Date(); 5 var e = function(){alert(111);}; 6 var f = function()

转:判断js中的数据类型的几种方法

判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异同. 先举几个例子: var a = "iamstring."; var b = 222; var c= [1,2,3]; var d = new Date(); var e = function(){alert(111);}; var f = function(){this.name=&

JS 中检测数组的四种方法

今天和大家分享一下 JS 中检测是不是数组的四种方法,虽然篇幅不长,不过方法应该算是比较全面了. 1. instanceof 方法 instanceof 用于检测一个对象是不是某个类的实例,数组也是一种对象所以也可以利用 instaceof 来进行判断. let arr = [1, 2, 3]; console.log(arr.instanceof(Array)); // true 这种方法在只有一个全局作用域的环境下是可以的,但是如果一个网页中包含多个框架,那么就会存在不同的全局环境,不同的环

JS原型链与几种继承方法的对比

继承的方式有两种:接口继承.实现继承接口继承:即虚函数,父类只定义接口,不具体实现子类继承接口,自己负责实现这个方法,运行时动态决定调用哪个实现.实现继承:父类实现的方法,子类可以直接调用 JS中只支持实现继承,以原型链来实现. 回顾一下构造函数.原型.实例的关系:每个构造函数都有一个原型对象,原型对象又都包含一个constructor指针指向构造函数,实例包含一个_proto_内部属性指向原型对象. 继承的实现方法(父类型叫Parent,子类型叫Child)原本Child.prototype

jquery ajax中支持哪些返回类型以及js中判断一个类型常用的方法?

1 jquery ajax中支持哪些返回类型在JQuery中,AJAX有三种实现方式:$.ajax() , $.post , $.get(). 预期服务器返回的数据类型.如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML.在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本.随后服务器端返回的数据会根据这个值解析后,传递给回调 函数.可用值: •"xml": 返回