>  기사  >  웹 프론트엔드  >  JavaScript의 세 가지 객체 상속 방법에 대한 코드 예제에 대한 자세한 설명

JavaScript의 세 가지 객체 상속 방법에 대한 코드 예제에 대한 자세한 설명

伊谢尔伦
伊谢尔伦원래의
2017-07-20 14:56:421023검색

js에는 세 가지 상속 방법이 있습니다

1.js 프로토타입(프로토타입)은 상속을 구현합니다

<SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html>  
<body>  
<script type="text/javascript">  
    function Person(name,age){  
        this.name=name;  
        this.age=age;  
    }  
    Person.prototype.sayHello=function(){  
        alert("使用原型得到Name:"+this.name);  
    }  
    var per=new Person("小倩",21);  
    per.sayHello(); //输出:使用原型得到Name:小倩  
      
    function Student(){}  
    Student.prototype=new Person("如彤",21);  
    var stu=new Student();  
    Student.prototype.grade=5;  
    Student.prototype.intr=function(){  
        alert(this.grade);  
    }  
    stu.sayHello();//输出:使用原型得到Name:如彤  
    stu.intr();//输出:5  
</script>  
</body>  
</html></SPAN></SPAN>

2 생성자는 상속을 구현합니다

<SPAN style="FONT-SIZE: 18px"><html>  
<body>  
<script type="text/javascript">  
    function  Parent(name){  
        this.name=name;  
        this.sayParent=function(){  
            alert("Parent:"+this.name);  
        }  
    }  
    function  Child(name,age){  
        this.tempMethod=Parent;  
        this.tempMethod(name);  
        this.age=age;  
        this.sayChild=function(){  
            alert("Child:"+this.name+"age:"+this.age);  
        }  
    }  
    var parent=new Parent("江剑");  
    parent.sayParent(); //输出:“Parent:江剑”  
    var child=new Child("李鸣",24); //输出:“Child:李鸣 age:24”  
    child.sayChild();  
</script>  
</body>  
</html></SPAN>

3.call, 적용은 상속을 구현합니다

<SPAN style="FONT-SIZE: 18px"><html>  
<body>  
<script type="text/javascript">  
    function  Person(name,age,love){  
        this.name=name;  
        this.age=age;  
        this.love=love;  
        this.say=function say(){  
            alert("姓名:"+name);  
        }  
    }  
    //call方式  
    function student(name,age){  
        Person.call(this,name,age);  
    }  
    //apply方式  
    function teacher(name,love){  
        Person.apply(this,[name,love]);  
        //Person.apply(this,arguments); //跟上句一样的效果,arguments  
    }  
    //call与aplly的异同:  
    //1,第一个参数this都一样,指当前对象  
    //2,第二个参数不一样:call的是一个个的参数列表;apply的是一个数组(arguments也可以)  
    var per=new Person("凤楼",25,"荧屏"); //输出:“凤楼”  
    per.say();  
    var stu=new student("曹玉",18);//输出:“曹玉”  
    stu.say();  
    var tea=new teacher("秦杰",16);//输出:“秦杰”  
    tea.say();  
</script>  
</body>  
</html></SPAN>

위 내용은 JavaScript의 세 가지 객체 상속 방법에 대한 코드 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.