深入JavaScript(一)之原型与原型链

Robin · 2019-12-1 · 次阅读

一.构造函数

通过构造函数，我们可以生成实例化的对象，构造函数是一种特殊的函数：

1
2
3
4
5
6
7
8
9
function Student(name) {
    this.name = name;
    this.hello = function () {
      console.log('Hello, ' + this.name + '!');
    };
}

  let xiaoming = new Student('小明');          
  xiaoming.hello();                             //  Hello, 小明!

注:Student就是一个构造函数，使用new关键字来调用构造函数生成实例对象，我们约定构造函数的函数名要大写，在构造函数的内部可以使用this关键字来添加属性。

二.prototype

每个函数都有一个prototype属性，它其实是个对象，我们可以通过代码来看一下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function Student(name) {
   this.name = name;
   this.hello = function () {
     console.log('Hello, ' + this.name + '!');
   };
 }

 let xiaoming = new Student('小明');          //  Hello, 小明!
 xiaoming.hello();

 Student.prototype.task = function () {
   console.log('学生的任务就是学习');
 };

 console.log(Student.prototype);             // {task: f}

 let stu1 = new Student();
 let stu2 = new Student();

 console.log(stu1.hello === stu2.hello);    // false

 console.log(stu1.task === stu2.task);      // true

注:prototype的作用是：抽离该构造函数所在类的共用属性和方法，使其所有的实例都共用同样的方法或者属性。

三.proto

每个实例对象都有一个私有属性[[Prototype]]，也就是我们经常见到的__proto__,__proto__指向了实例对象的原型，它也是一个对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Student(name) {
    this.name = name;
    this.hello = function () {
      console.log('Hello, ' + this.name + '!');
    };
  }

 Student.prototype.task = function () {
    console.log('学生的任务就是学习');
 };
 Student.prototype.hobby = 'enjoy';

  let xiaoming = new Student('小明');                              //  Hello, 小明!
  console.log(xiaoming.__proto__);                                //  {hobby: "enjoy",task: ƒ ()}
  console.log(xiaoming.__proto__ === Student.prototype);          //  true

四.constructor

每个实例对象都有一个constructor属性，该属性指向与其相关联的构造函数：

 function Animal(name) {
     this.name = name;
     this.sound = function () {
        console.log(this.name + '叫了好几声');
     };
  }

  Animal.prototype.age = 2;

  let dog = new Animal('da_huang');
  console.log(dog.constructor);                 // f Animal(name){}
赏

前端开发攻城狮