这是我参与「第五届青训营」伴学笔记创作活动的第 8 天

0 前面的话

今天就写点JavaScript的知识吧！知识点内容可能比较散，仅记录一下而已。这里的学习参考了部分菜鸟教程内容，如有需要，链接：www.runoob.com/js/js-objec…

1 正文

JavaScript 类

JavaScript 是面向对象的语言，但 JavaScript 不使用类。在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。JavaScript 基于 prototype，而不是基于类的。

JavaScript prototype（原型对象）

基础内容

在一个已存在构造器的对象中是不能添加新的属性，添加一个新的属性需要在构造器函数中添加。

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。

Date 对象从 Date.prototype 继承。
Array 对象从 Array.prototype 继承。
Person 对象从 Person.prototype 继承。

所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。

JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

Date 对象, Array 对象, 以及 Person 对象从 Object.prototype 继承。

有的时候我们想要在所有已经存在的对象添加新的属性或方法。另外，有时候我们想要在对象的构造函数中添加属性或方法。使用 prototype 属性就可以给对象的构造函数添加新的属性：

function Person(first, last, age, eyecolor) { 
    this.firstName = first; 
    this.lastName = last; 
    this.age = age; 
    this.eyeColor = eyecolor; 
} 

Person.prototype.nationality = "English";

给已有的函数对象增加属性或者方法

格式：构造函数名.prototype.新属性或者新方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>
function Students(name, height, age) {
    this.name = name;
    this.height = height;
    this.age = age;
    this.outputInfo  = function() {
        document.write('name = ' + this.name +  '<br>' + 'height = ' + this.height + '<br>');
    }
}

//增加一个新方法
Students.prototype.newFunction = function() {
    document.write('此方法是通过prototype继承后实现的');
}

var stu1 = new Students('zhang', 123, 12);
stu1.outputInfo();
stu1.newFunction();
</script>
</body>
</html>

通常使用构造器（函数体）定义属性，使用原型对象（prototype）定义方法。

如此，构造器只包含属性定义，而方法则分装在不同的代码块，使代码更具可读性：

// 构造器内定义属性
function Fun(a, b) {
  this.a = a;
  this.b = b;
}

// 原型属性定义方法
Fun.prototype.c = function() {
  return this.a + this.b;
}

// etc...
注意，千万不要使用字面量方式来定义属性和方法，否则原有属性和方法会被重写：

function Fn() {};

// 定义属性
Fn.prototype.a = 1;
Fn.prototype.b = 2;

// 字面量定义方法，原型被重写，原有属性和方法被更新
Fn.prototype = {
  c : function() {
    return this.a + this.b;
  }
}

var foo = new Fn();
foo.c();  // NaN
foo.a;  // undefined
foo.b;  // undefined

字节青训营前端青训营笔记「8」 | 青训营笔记