JS学习笔记03-初识继承

最新推荐文章于 2025-02-01 22:48:57 发布

原创最新推荐文章于 2025-02-01 22:48:57 发布 · 681 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

6 篇文章

订阅专栏

<!DOCTYPE HTML>
<html lang="en">
<head>
 <meta charset="UTF-8"> 
    <title>test</title>
    <style type="text/css">    
    </style>
    </head>
    
<body>
     <script type="text/javascript">
     // ◆prototype方式
     var Widget = function(){
        title = '';     
        this.getTitle=function(){
                return this.title;
        }
         this.setTitle=function(){
                this.title = arguments[0];
        } 
    }

    
    var Button = function(){}
    Button.prototype = new Widget();

    
    var Edit = function(){}
    Edit.prototype = new Widget(); 

    
    var btn = new Button();
    btn.setTitle('button title name');

    
    var edt = new Edit();
    edt.setTitle('edit title name');

    //当前对象中找不到时,查找prototype原型链
    console.log(edt.getTitle()); 
    console.log(btn.getTitle()); 
    console.log(btn.title+' '+edt.title); 
    
    

    // ◆call+prototype方式
     var Toolbar = function(){
         Widget.call(this);
         Toolbar.prototype = new Widget();
         this.setTitle(arguments[0]);
    }
 
     var toolbar = new Toolbar('toolbar title name');      
     console.log(toolbar.getTitle() +' '+ toolbar.title); 

     
     console.log(btn.hasOwnProperty('title'));//true
     console.log(btn.hasOwnProperty('setTitle'));//false
     console.log(toolbar.hasOwnProperty('title'));//true
     console.log(toolbar.hasOwnProperty('setTitle'));//true
    </script>
</body>