原型、原型链、闭包立即执行函数、插件开发（十）

Candy 2020/6/3 JS

# 一、原型

# prototype

原型prototype是function对象的一个属性，它也是一个对象。这个prototype是定义构造函数构造出的每个对象的公共祖先。

function Handphone() { }
console.log(Handphone.prototype);

1
2

function Handphone(color, brand, system) {
  this.color = color;
  this.brand = brand;
  this.system = system;
}

Handphone.prototype = {
  rom: '64G',
  ram: '6G',
  screen: '18:9',
  system: 'Android',
  call: function () {
    console.log('I am calling somebody');
  }
}

var hp1 = new Handphone('black', 'iPhone', 'IOS');
console.log(hp1);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# constructor

原型prototype的一个属性，指向该构造函数。所有该构造函数构造出的对象都可以继承原型上的属性和方法。可以被更改。

function Handphone(color, brand, system) {
  this.color = color;
  this.brand = brand;
  this.system = system;
}

function Telephone() {}

// 可以更改对象的构造函数
Handphone.prototype = {
  constructor: Telephone
}

1
2
3
4
5
6
7
8
9
10
11
12

# 二、原型链

构造函数通过new实例化对象，生成__proto__属性，该属性是一个对象，指向该构造函数的原型。实例化对象通过__proto__属性可以访问到该构造函数原型上的属性和方法，形成原型链。

function Car() {
  // var this = {
  //   __proto__: Car.prototype
  // }
}

Car.prototype.name = 'Benz';

var car = new Car();
console.log(car);

1
2
3
4
5
6
7
8
9
10

proto、prototype属性可以被修改。

function Person() { }
Person.prototype.name = '张三';
var p1 = {
  name: '李四'
}

var person = new Person();
console.log(person.name); // '张三'
person.__proto__ = p1;
console.log(person.name); // '李四'

function Car() { }
Car.prototype.name = 'Mazda';
var car = new Car();

Car.prototype.name= 'Benz';
console.log(car.name); // 'Benz'


// 构造函数的原型添加name属性
Car.prototype.name = 'Benz';
function Car() { }
var car = new Car();
// 构造函数的原型指向新的对象
Car.prototype = {
  name: 'Mazda'
}
// 实例化出来的对象的__proto__属性指向的是未修改前的Car.ptototype对象
console.log(car.name); // 'Benz'
console.log(car);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 三、闭包立即执行函数

return形成闭包，将函数内部的AO返回到全局。

function test() {
  var a = 1;
  function plus1() {
    a++;
    console.log(a);
  }
  return plus1;
}

var plus = test();
plus();
plus();
plus();

1
2
3
4
5
6
7
8
9
10
11
12
13

window，将属性和方法挂到全局对象window上，实现全局访问。

function abc() {
  window.a = 3;
}

abc();
console.log(a); // 3

function test() {
  var a = 1;
  function add() {
    a++;
    console.log(a);
  }
  window.add = add;
}
test(); // 执行后，可以在全局环境下访问到add方法
add();
add();
add();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

IIFE，声明一个全局变量接收函数返回值，或者直接挂载到window对象上。

var add = (function () {
  var a = 1;
  function add() {
    a++;
    console.log(a);
  }
  return add;
})();
//-----------------------------------------------------------------------------------------
;(function () {
  var a = 1;
  function add() {
    a++;
    console.log(a);
  }
  window.add = add;
})();

add();
add();
add();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 四、插件开发

;(function () {
  function Test() { }

  Test.prototype = {}

  window.Test = Test;
})();

var test = new Test();

1
2
3
4
5
6
7
8
9