js原生设计模式——2面向对象编程之继承

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>classInherit</title>
   <script type="text/javascript">
   //声明父类
   function superClass(){
       this.name = 'Lucy';
   }
   superClass.prototype.getName = function(){
       console.log(this.name);
   }
   //声明子类
   function subClass(){
       this.subname = 'Lilei';
       this.books = ['html','css','js'];
   }
   //类式继承
   subClass.prototype = new superClass();
   //注：一定要先继承，再添加子类原型方法，否则子类的实例调用子类原型方法时会报错：function is not defined
   subClass.prototype.getSubName = function(){
       console.log(this.subname);
   }
   //将子类的prototype原型constructor属性的指向修正为subClass子类，否则继承后默认指向了父类的原型上，会出问题
   subClass.prototype.constructor = subClass;
   //实例化对象测试
   var test1 = new subClass();
   var test2 = new subClass();
   console.log(test1.name);       //Lucy
   console.log(test1.subname);    //Lilei
   test1.getName();               //Lucy
   test1.getSubName();            //Lilei
   // console.log(test1.books);
   test1.books.push('php');
   console.log(test1.books);   //输出：["html", "css", "js", "php"]
   console.log(test2.books);   //输出：["html", "css", "js"]
                               // 两个实例之间不会影响
   //本例已经通过验证
   </script>
</head>
<body>

</body>
</html>

巴特西

js原生设计模式——2面向对象编程之继承—new类式继承

最新文章

热门文章