JavaScript的对象

发表于 | 分类于

JavaScript的面向对象

[TOC]

与Java的区别

  • JavaScript的面向对象编程和大多数其他语言如Java、C#的面向对象编程都不太一样。

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var Student = {
        name: 'Robot',
        height: 1.2,
        run: function () {
            console.log(this.name + ' is running...');
        }
    };
    var xiaoming = {
        name: '小明'
    };
    xiaoming.__proto__ = Student;
    xiaoming.name; // '小明'
    xiaoming.run(); // 小明 is running...继承而来的方法

  • JavaScript的原型链和Java的Class区别就在，它没有“Class”的概念，所有对象都是实例，所谓继承关系不过是把一个对象的原型指向另一个对象而已。

创建对象

  • JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。

    当我们用obj.xxx访问一个对象的属性时，JavaScript引擎先在当前对象上查找该属性，如果没有找到，就到其原型对象上找，如果还没有找到，就一直上溯到Object.prototype对象，最后，如果还没有找到，就只能返回undefined。

  • 构造函数

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function Student(name) {
        this.name = name;
        this.hello = function () {
            alert('Hello, ' + this.name + '!');
        }
    }
    //通过new修饰后即可将其变成一个对象，如果不写new，这就是一个普通函数，它返回undefined。但是，如果写了new，它就变成了一个构造函数，它绑定的this指向新创建的对象，并默认返回this，也就是说，不需要在最后写return this;。
    var xiaoming = new Student('小明');
    xiaoming.name; // '小明'
    xiaoming.hello(); // Hello, 小明!

    通过new创建的对象都指向同一个原型:

    1
    2
    3
    xiaoming ↘
    xiaohong -→ Student.prototype ----> Object.prototype ----> null
    xiaojun  ↗

    ​

    通过class创建和继承对象

  • 在es6之后，通过引入了class关键字简化了对象的创建以及对象的继承。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    class Student {
        //构造函数
          constructor(name) {
              this.name = name;
          }
        //定义在原型对象上的函数hello(),没有关键字function
          hello() {
              alert('Hello, ' + this.name + '!');
          }
      }

  • 对象的继承（和java简直超级像有木有）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    class PrimaryStudent extends Student {
        constructor(name, grade) {
            super(name); // 记得用super调用父类的构造方法!
            this.grade = grade;
        }
        myGrade() {
            alert('I am at grade ' + this.grade);
        }
    }
    ​