JavaScript面向对象

75 阅读3分钟

[原型对象]

JavaScript的[面向对象编程]和大多数其他语言如Java、C#的面向对象编程都不太一样。如果你熟悉Java或C#,很好,你一定明白面向对象的两个基本概念:

  • 类: 类是对象的类型模板,例如,定义Student类来表示学生,类本身是一种类型,Student表示学生类型,但不表示任何具体的某个学生
  • 对象:实例是根据类创建的对象,例如,根据Student类可以创建出xiaomingxiaohongxiaojun等多个实例,每个实例表示一个具体的学生,他们全都属于Student类型。

在JavaScript这个需要大家换一下思维方式!JavaScript不区分类和实例的概念,而是通过原型(prototype)来实现面向对象编程。

原型:

var Student = {
    name: "jjh",
    age: 3,
    run: function () {
        console.log(this.name + " run....");
    }
};
 
 
var xiaoming = {
    name: "xiaoming"
};
 
//原型对象
xiaoming.__proto__ = Student;
 

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

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

生成实例对象——构造函数

JavaScript 语言中,生成实例对象的传统方法是通过构造函数。

// 定义构造函数 Point,该函数内有属性 x 和 y
function Point(x, y) {
  this.x = x;
  this.y = y;
}

// Object.prototype.toString():返回当前对象对应的字符串形式。(Point 函数 也是一种对象)
Point.prototype.toString = function () {
  return "(" + this.x + ", " + this.y + ")";
};

// 执行构造函数 Point(1, 2),返回一个实例对象 p, 内有属性 x = 1 和 y = 2
var p = new Point(1, 2);

构造函数

  • 就是专门用来生成实例对象的函数。它就是对象的模板,描述实例对象的基本结构。
  • 构造函数就是一个普通的函数,但具有自己的特征和用法。所以不用new也可以执行
  • 为了与普通函数区别,构造函数名字的第一个字母通常大写。

new命令:执行构造函数,返回一个实例对象。

使用new命令时,根据需要,构造函数也可以接受参数。

  • 如果忘了使用new命令,直接调用构造函数,构造函数就变成了普通函数,并不会生成实例对象。而且由于后面会说到的原因,this这时代表全局对象,将造成一些意想不到的结果。

  • 为了保证构造函数必须与new命令一起使用,

  • 构造函数内部使用严格模式,即第一行加上use strict。这样的话,一旦忘了使用new命令,直接调用构造函数就会报错

  • 构造函数内部判断是否使用new命令,如果发现没有使用,则直接返回一个实例对象。 new命令原理

  • 创建一个空对象,作为将要返回的对象实例。

  • 将这个空对象的原型,指向构造函数的prototype属性。

  • 将这个空对象赋值给函数内部的this关键字。

  • 开始执行构造函数内部的代码。

 this

  • 构造函数内部,this指的是一个新生成的空对象,所有针对this的操作,都会发生在这个空对象上。
  • 构造函数之所以叫“构造函数”,就是说这个函数的目的,就是操作一个空对象(即this对象),将其“构造”为需要的样子。