javascript面向对象编程---学习笔记

墨蓝 2022-09-22 01:16 258阅读 0赞

1.面向对象编程  
javscript不区分类和实例的概念，而是通过原型(prototype)来实现面向对象编程。

注意最后一行代码把xiaoming的原型指向了对象Student，看上去xiaoming仿佛是从Student继承下来的：

xiaoming.name; // '小明'
    xiaoming.run(); // 小明 is running...

xiaoming有自己的name属性，但是并没有定义run()方法。不过由于小明是从student继承而来的，只要Student有run（）方法，xiaoming也可以调用。  
![这里写图片描述][20160625115117120]  
所谓的继承关系不过是把一个对象的原型指向另一个对象而已。

**创建原型继承：**

/ 原型对象:
    var Student = {
        name: 'Robot',
        height: 1.2,
        run: function () { 
            console.log(this.name + ' is running...');
        }
    };
    
    function createStudent(name) { 
        // 基于Student原型创建一个新对象:
        var s = Object.create(Student);
        // 初始化新对象:
        s.name = name;
        return s;
    }
    
    var xiaoming = createStudent('小明');
    xiaoming.run(); // 小明 is running...
    xiaoming.__proto__ === Student; // true

**2.创建对象**  
JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。  
当使用obj.\*\*访问一个对象的属性时，javascript先在当前对象上查找该属性，如果没有找到，就到其原型对象上找，如果还没有找到，就一直上溯到Object.prototype对象，最后，如果还没有找到，就只能返回undefined。  
例如：创建一个Array对象

var arr=[1,2,3];

其原型链是：

arr---->Array.prototype---->Object.prototype------>null

Array.prototype定义了indexof(),shift()等方法，因此你可以在所有的Array对象上直接调用这些方法。

function foo(){ 
      return 0;
    }

函数也是一个对象，它的原型链是：

foo----->Function.prototype----->Object.prototype----->null

由于Function.prototype定义了apply()等方法，因此，所有函数都可以调用apply()方法。

**构造函数**

除了直接用\{ \}创建一个对象外，javascript还可以用一种构造函数的方法来创建对象。它的用法是，先定义一个构造函数。

function Student(name){ 
     this.name=name;
     this.hello=function (){ 
      alert('hello'+this.name+'!');  
    }
    }

这是一个普通的函数，但是在javascript中，可以用关键字new来调用这个函数，并返回一个对象

var xiaoming=new Student('小明')；
    xiaoming.name; //小明
    xiaoming.hello();// hello 小明

**注意：**如果不写new，这就是一个普通函数，它返回undefined。但是，如果写了new，它就变成了一个构造函数，**它绑定的this指向新创建的对象，**并默认返回this。也就是说，不需要在最后写return this；  
新创建的xiaoming的原型链是：

xiaoming--->Student.prototype--->Object.prototype---->null

用new Student()创建的对象还从原型上获得了一个constructor属性，它指向函数Student本身：

xiaoming.constructor === Student.prototype.constructor; // true
    Student.prototype.constructor === Student; // true
    Object.getPrototypeOf(xiaoming) === Student.prototype; // true
    xiaoming instanceof Student; // true

![这里写图片描述][20160625154349770]

红色箭头是原型链。注意，Student.prototype指向的对象就是xiaoming、xiaohong的原型对象，这个原型对象自己还有个属性constructor，指向Student函数本身。

函数Student恰好有个属性prototype指向xiaoming、xiaohong的原型对象，但是xiaoming、xiaohong这些对象可没有prototype这个属性，不过可以用__proto__这个非标准用法来查看。

xiaoming.hello; // function: Student.hello()
    xiaohong.hello; // function: Student.hello()
    xiaoming.hello === xiaohong.hello; // false

xiaoming和xiaohong各自的hello是一个函数，但它们是两个不同的函数，虽然函数名称和代码都是相同的！

如果通过new Student()创建了很多对象，这些对象的hello函数实际上只需要共享同一个函数就可以了，这样可以节省很多内存。要让对象共享一个hello函数，根据对象的属性查找原则，只要把hello函数移动到共同的原型上就可以了，也就是Student.prototype:

function Student(name) { 
        this.name = name;
    }
    
    Student.prototype.hello = function () { 
        alert('Hello, ' + this.name + '!');
    };

**注意：**  
如果一个函数被定义为创建对象的构造函数，但是调用时忘记了写new。  
\*\*在严格模式下，\*\*this.name=name将报错，因为this绑定为undefined。  
**在非严格模式下，**不报错，因为this绑定了window，于是创建了全局变量name，并且返回undefined，这个结果更糟糕。

**构造函数的首字母应该大写，而普通函数的首字母小写。**

**3 原型继承**

现在要基于Student扩展出PrimaryStudent，可以先定义出PrimaryStudent

function PrimaryStudent(props){ 
    //调用Student构造函数，绑定this变量
    Student.call(this,props);
    this.grade=props.grade|| 1;
    }

但是调用了Student构造函数不等于继承了Student，PrimaryStudent创建的对象原型是：

new PrimaryStudent() ----> PrimaryStudent.prototype ----> Object.prototype ----> null

必须想办法把原型链修改为：

new PrimaryStudent() ----> PrimaryStudent.prototype ----> Student.prototype ----> Object.prototype ----> null

这样，原型链对了，继承关系就对了。新的基于PrimaryStudent创建的对象不但能调用PrimaryStudent.prototype定义的方法，也可以调用Student.prototype定义的方法。

这时，可以借助一个中间对象来实现正确的原型链，这个中间对象的原型要指向Student.prototype。中间对象可以用一个空函数F来实现。

// PrimaryStudent构造函数:
    function PrimaryStudent(props) { 
        Student.call(this, props);
        this.grade = props.grade || 1;
    }
    // 空函数F:
    function F() { 
    }
    
    // 把F的原型指向Student.prototype:
    F.prototype = Student.prototype;
    
    // 把PrimaryStudent的原型指向一个新的F对象，F对象的原型正好指向Student.prototype:
    PrimaryStudent.prototype = new F();
    
    // 把PrimaryStudent原型的构造函数修复为PrimaryStudent:
    PrimaryStudent.prototype.constructor = PrimaryStudent;
    
    // 继续在PrimaryStudent原型（就是new F()对象）上定义方法：
    PrimaryStudent.prototype.getGrade = function () { 
        return this.grade;
    };
    
    // 创建xiaoming:
    var xiaoming = new PrimaryStudent({
        name: '小明',
        grade: 2
    });
    xiaoming.name; // '小明'
    xiaoming.grade; // 2
    
    // 验证原型:
    xiaoming.__proto__ === PrimaryStudent.prototype; // true
    xiaoming.__proto__.__proto__ === Student.prototype; // true
    
    // 验证继承关系:
    xiaoming instanceof PrimaryStudent; // true
    xiaoming instanceof Student; // true

![这里写图片描述][20160625161739878]

如果把继承这个动作用一个inherits()函数封装起来，还可以隐藏F的定义，并简化代码：

function inherits(Child, Parent) { 
        var F = function () { };
        F.prototype = Parent.prototype;
        Child.prototype = new F();
        Child.prototype.constructor = Child;
    }

**javascript的原型继承实现方式就是：**  
1.定义新的构造函数，并在内部用call（）调用希望继承的构造函数，并绑定this  
2.借助中间函数F实现原型链继承，最好通过封装的inherits函数完成  
3.继续在新的构造函数的原型上定义新方法

**4 class继承**  
新的关键字class从ES6开始正式被引入到JavaScript中。class的目的就是让定义类更简单。

class Student{ 
      constructor(name){
       this.name=name;
     }
     hello(){
     alert('hello, '+this.name+'!');
     }
    }

比较一下就可以发现，class的定义包含了构造函数constructor和定义在原型对象上的函数hello().  
创建一个Student对象代码和前面章节完全一样

var xiaoming=new Student('小明')；
    xiaoming.hello();

通过class定义对象的更方便继承，直接通过extends来实现：

class PrimaryStudent extends Student { 
        constructor(name, grade) {
            super(name); // 记得用super调用父类的构造方法!
            this.grade = grade;
        }
    
        myGrade() {
            alert('I am at grade ' + this.grade);
        }
    }

注意PrimaryStudent的定义也是**class**关键字实现的，而**extends**则表示原型链对象来自Student。子类的构造函数可能会与父类不太相同，例如，PrimaryStudent需要name和grade两个参数，并且需要通过super(name)来调用父类的构造函数。

PrimaryStudent已经自动获得了父类Student的hello方法，我们又在子类中定义了新的myGrade方法。

[20160625115117120]: /images/20220721/dad61a3963df4e95bea2f7ed9dbab2ac.png
[20160625154349770]: /images/20220721/d4f449d7fd9042a59afd3e3c90a52af6.png
[20160625161739878]: /images/20220721/0c6982fa6b0942ee9027efe5ccb9d386.png