JS面向对象编程小记

超、凢脫俗 2022-01-11 09:45 194阅读 0赞

JavaScript面向对象编程中不区分类和实例的概念，而是通过原型来实现面向对象的编程。

var Student = \{

name:'Robot',

height:1.6,

run: function () \{

console.log(this.name + ' is running...');

\};

var xiaoming = \{

name: '小明'

xiaoming.\_\_proto\_\_ = Student; //把xiaoming的原型指向了Student，xiaoming继承了Student的属性

//xiaoming有自己的name属性但并没有run()方法，由于xiaoming继承了Student，只要Student有run()方法，xiaoming就可以调用。在代码运行期间xiaoming可以变成任何对象

在实际编写JavaScript代码时，不要直接用obj.\_\_proto\_\_去改变一个对象的原型。Object.create()可以传入一个原型对象，并创建基于该原型的新对象，但新对象什么属性都没有。可以编写一个函数来创建xiaoming

function createStudent (name) \{

s = Object.create(Student); //基于Student原型创建一个新对象

s.name = name;//初始化新对象

return s

var xiaoming = createStudent("小明");

xiaoming.run();//xiaoming is running...

xiaoming.\_\_proto\_\_ = Student;//true

以上是创建原型继承的一种方法。

JavaScript对每个创建的对象都会设置一个原型指向它的原型对象，除了直接用\{...\}来创建一个对象外，JavaScript还可以通过构造函数的方法来创建一个对象

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

这个函数可以用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.construcror === Student;//true
        Object.getPrototypeOf(xiaoming) === Student.prototype;//true
        xiaoming instanceof Student;//true

注意，在这里我们通过new Student()来创建的许多对象的hello()方法并不相等，实际上这些对象的hello函数只需要共享同一个就可以了。修改代码如下

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

这是用new创建基于原型的JavaScript对象的方法。

调用构造函数千万不要忘记写new，因为在use strict模式下this.name = name将报错，this绑定为undefined；在非strict模式下，this.name = name不报错，this绑定为window，于是创建了全局变量name并且返回undefined。为了区分构造函数和普通函数，按照约定，构造函数的首字母应当大写，而普通函数的首字母应当小写。

我们可以编写一个createStudent()函数，内部封装所有的new操作。一个常用的模式如下

function Student(props) {
            this.name = props.name || 'unamed';//默认值为unamed
            this.grade = props.grade || 1;//默认值为1
        }
        Student.prototype.hello = function () {
            alert ('Hello, ' + this.name + '!');
            }
        function createStudent(props) {
            return new Student(props || {})
        }
        var xiaoming = createStudent({
            name: '小明'
        });
        xiaoming.grade;//1

这个createStudent()有几个巨大的优点：一是不需要通过new来调用，二是参数非常的灵活，可以不传。

JavaScript原型继承：

在传统的基于Class的语言如Java、C++中，继承的本质是扩展一个已有的Class，并生成新的Subclass。

由于这类语言严格区分类和实例，继承实际上是类型的扩展。但是，JavaScript由于采用原型继承，我们无法直接扩展一个Class，因为根本不存在Class这种类型。

先写一个构造函数

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

现在要基于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

要想办法修改PrimaryStudent原型链为

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

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

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: 3
            });
        xiaoming.name;//"小明"
        xiaoming.grade;//3

//验证原型
        xiaoming.__proto__ === PrimaryStudent.prototype;//true
        xiaoming.__proto__.__proto__ === Student.prototype;//true

//验证继承关系
        xiaoming instanceof PrimaryStudent;//true
        xiaoming instanceof Student;//true

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

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

这个inherit()函数可以复用

function Student(props) {
            this.name = props.name || 'Unnamed';
        }
    
        Student.prototype.hello = function () {
            alert('Hello, ' + this.name + '!');
        }
        function PrimaryStudent(props) {
            Student.call(this, props);    
            this.grade = props.grade || 1;
        }
        // 实现原型继承链:
        inherits(PrimaryStudent, Student);
        // 绑定其他方法到PrimaryStudent原型:
        PrimaryStudent.prototype.getGrade = function () {
            return this.grade;
        };

小结，JavaScript的原型继承实现方式就是：

1，定义新的构造函数，并在内部用call()调用希望“继承”的构造函数，并绑定this；

2，借助中间函数F实现原型链的继承，最好封装inherits函数来完成；

3，继续在新的构造函数的原型上定义新方法。

class继承：

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

如果用新的class关键字来编写Student，可以这样写

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

比较一下就可以发现，class的定义包含了构造函数constructor和定义在原型对象上的函数hello()（注意没有function关键字），这样就避免了Student.prototype.hello = function () \{...\}这样分散的代码。

用class定义对象的另一个巨大的好处是继承更方便了。想一想我们从Student派生一个PrimaryStudent需要编写的代码量。现在，原型继承的中间对象，原型对象的构造函数等等都不需要考虑了，直接通过extends来实现

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

转载于:https://blog.51cto.com/12606842/1977567