几个代码片段搞清楚【es5 的 类 静态方法 原型链 继承】

• es5 的类定义

1,最简单的类

        // function Person() {
        //   this.name = "张三";
        //   this.age = 30;
        // }
        // let p = new Person();

        // console.log(typeof Person); // 打印 function ，可知es5 中类就是一个函数
        // console.log(typeof p); // 打印 object，使用了 new 关键字声明的会是一个object
        // console.log(p.constructor === Person);//true
        // console.log(p.constructor.prototype === Person.prototype); //true
        // console.log(p.name, p.age);

2,构造函数和原型链中定义方法的类

        // function Person() {
        //   this.name = "张三";
        //   this.age = 30;
        //   this.run = function () {	//实例方法
        //     console.log(this.name + " is running");
        //   };
        // }

        // Person.prototype.gender = "男";
        // Person.prototype.work = function () {
        //   console.log(this.name + " is working");
        // };

        // let p = new Person();
        // p.run();
        // p.work(); //可以像调用对象自己的属性一样调用原型链上的属性和方法
        // console.log(p.gender);
        // console.log(p);

3,类的静态方法的声明和使用

        // function Person() {
        //   this.name = "张三";
        //   this.age = 30;
        //   this.run = function () {
        //     console.log(this.name + " is running");
        //   };
        // }

        // Person.getInfo=function(){
        // 	console.log('this is a class static function');
        // }

        // Person.getInfo();
        // console.log(Person.prototype);

•  es5 的继承

1. 对象冒充式继承

           // function Person() {
           //   this.name = "张三";
           //   this.age = 30;
           //   this.run = function () {
           //     console.log(this.name + " is running");
           //   };
           // }
           // Person.prototype.work = function () {
           //   console.log(this.name + " is working");
           // };
   
           // function Web() {
           //   Person.call(this);
           // //   console.log(this);
           // }
           // let w = new Web();
           // w.run();		// 可以继承父类构造函数的属性和方法
           // // w.work();	//error 不能继承父类原型上的方法
           // console.log(w);
   

2. 原型链式继承

           // function Person() {
           //   this.name = "张三";
           //   this.age = 30;
           //   this.run = function () {
           //     console.log(this.name + " is running");
           //   };
           // }
           // Person.prototype.work = function () {
           //   console.log(this.name + " is working");
           // };
   
           // function Web() {};
           // Web.prototype=new Person();	//原型链实现继承，同时继承父类构造函数和原型上的成员
           // let w=new Web();
           // w.run();
           // w.work();
           // console.log(w);
   

3. 原型链实现继承的问题

           // function Person(name, age) {
           //   this.name = name;
           //   this.age = age;
           //   this.run = function () {
           //     console.log(this.name + " is running");
           //   };
           // }
           // Person.prototype.work = function () {
           //   console.log(this.age + " 岁的 " + this.name + " is working");
           // };
   
           // function Web(name, age) {}
           // Web.prototype = new Person();
           // let w = new Web("张一三", 32);	//实例化子类对象时，无法给父类传参
           // w.run();	//name undefined
           // w.work();	//name age undefined
           // console.log(w);
   
   

4. 原型链加对象冒充的组合继承模式

           // function Person(name, age) {
           //   this.name = name;
           //   this.age = age;
           //   this.run = function () {
           //     console.log(this.name + " is running");
           //   };
           // }
           // Person.prototype.work = function () {
           //   console.log(this.age + " 岁的 " + this.name + " is working");
           // };
   
           // function Web(name, age) {
           // 	Person.call(this,name,age);	//对象冒充继承，实例化时可以给父类传参
           // }
           // Web.prototype = new Person();
           // let w = new Web("张一三", 32);	//实例化子类对象时，无法给父类传参
           // w.run();
           // w.work();
           // console.log(w);
   

5. 原型链加对象冒充的组合继承的另一种写法

           function Person(name, age) {
             this.name = name;
             this.age = age;
             this.run = function () {
               console.log(this.name + " is running");
             };
           }
           Person.prototype.work = function () {
             console.log(this.age + " 岁的 " + this.name + " is working");
           };
   
           function Web(name, age) {
             Person.call(this, name, age); //对象冒充继承，实例化时可以给父类传参
           }
           Web.prototype = Person.prototype;
           let w = new Web("张二三", 32); //实例化子类对象时，无法给父类传参
           w.run();
           w.work();
           console.log(w);
           console.log("Person ", Person.prototype);
           console.log("Web ", Web.prototype);