首页 > 基础资料 博客日记

JavaScript 继承

2023-08-10 19:55:52基础资料围观213

这篇文章介绍了JavaScript 继承,分享给大家做个参考,收藏Java资料网收获更多编程知识

1.对象继承

使用Object.create()方法接受两个参数。第一个参数是需要被设置为新对象的[[Prototype]]的对象。第二个可选参数是一个属性描述对象

//对象继承
            var person3={
                name:"3号",
                sayName:function(){
                    console.log(this.name);
                }
            };
            var person4=Object.create(person3,{
                name:{
                    configurable:true,
                    enumerable:true,
                    value:"4号继承自3号",
                    writable:true
                }
            });
            person3.sayName();
            person4.sayName();
            console.log(person3.hasOwnProperty("sayName"));//true
            console.log(person3.isPrototypeOf(person4));// 3是不是4的原型对象 yes
            console.log(person4.hasOwnProperty("sayName"));//false
            console.log("sayName" in person4);

这段代码创建了一个对象person1,具有一个name属性和一个sayName()方法。对象person2继承自person1,也就继承了name和sayName()。然而person2在通过Object.create()创建时还定义了一个自有属性name。该自有属性隐藏并代替了原型对象的同名属性

2.构造函数继承

function Rectangle(length,width){
                this.length=length;
                this.width=width;
            }
            
            Rectangle.prototype={
                constructor:Rectangle,
                
                getArea:function(){
                    return this.length*this.width;
                },
                
                toString:function(){
                    return "[ Rectangle"+this.length+"x"+this.width+"]";
                }
            };
            
            function Square(size){
                this.width=size;
                this.length=size;
            }
            
//Square构造函数的prototype属性被改写成Rectangle的一个对象实例。不需要给Rectanle提供参数,因为它们不需要被使用 Square.prototype
=new Rectangle(); Square.prototype.constructor=Square; Square.prototype.toString=function(){ return "[ Square"+this.length+"x"+this.width+"]"; } // 创建实例 var rect=new Rectangle(5,7); var square=new Square(5); console.log(rect.getArea()); console.log(square.getArea()); console.log(rect.toString()); console.log(square.toString()); console.log(rect instanceof Rectangle); console.log(rect instanceof Object); console.log(rect instanceof Square); console.log(square instanceof Rectangle); console.log(square instanceof Object); console.log(square instanceof Square);

Square构造函数的prototype属性被改写为Rectangle的一个对象实例。。此时不需要给Rectangle的调用提供参数,因为它们不需要被使用,而且如果提供了,那么所有的Square的对象实例都会共享同样的维度

 

事实上,唯一相关的部分是Square.prototype需要指向Rectangle.prototype,使得继承得以实现。

 

 

2.3构造函数窃取

由于JavaScript中的继承是通过原型对象链来实现的,因此不需要调用对象的父类的构造函数。如果你确实需要在子类构造函数中调用父类构造函数,那你就需要利用JavaScript函数工作的特性。

学过的call()和apply()方法允许你在调用函数时提供一个不同的this值。那正好是构造函数窃取的关键。只需要在子类的构造函数中用call()或者apply()调用父类的构造函数,并将新创建的对象传进去即可。实际上,就是用自己的对象窃取父类的构造函数

function Square2(size){
                Rectangle.call(this,size,size);
            }
Square2.prototype
=Object.create(Rectangle.prototype,{ constructor:{ configurable:true, enumerable:true, value:Square2, writable:true } }); //如果想要访问父类怎么办? Square2.prototype.toString=function(){ var text=Rectangle.prototype.toString.call(this); return text.replace('Rectangle',"Square"); }; //通过call()或apply()调用父类的原型对象的方法是传入一个子类对象 var square2=new Square(6); console.log(square2.length); console.log(square2.width); console.log(square2.getArea()); console.log(square2.toString());

Square构造函数调用了Rectangle构造函数,并传入了this和size两次(一次作为length,另一次作为width)。这么做会在新对象上创建length和width属性并让它们等于size,这是一种避免在构造函数里重新定义你希望继承的属性的手段。你可以在调用完父类的构造函数后继续添加新属性或覆盖已有的属性。

这个分两步走的过程在你需要完成自定义类型之间的继承时比较有用。你经常需要修改一个构造函数的原型对象,你也经常需要在子类的构造函数中调用父类的构造函数。一般来说,需要修改prototype来继承方法并用构造函数窃取来设置属性。由于这种做法模仿了那些基于类的语言的类继承,通常被称为伪类继承。

 


文章来源:https://www.cnblogs.com/ttguo/p/16559383.html
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:jacktools123@163.com进行投诉反馈,一经查实,立即删除!

标签:

相关文章

本站推荐

标签云