10 原型，原型链,闭包,立即执行函数，插件开发

原型

定义：prototype 是函数对象的一个属性。函数的prototype也是一个对象。

1. 函数的prototype里的构造函数指向函数本身。

   function HandPhone(){}
   console.log(HandPhone.prototype)//{constructor:HandPhone(){}}

   

2. prototype是 构造函数构造出的对象的祖先。所有被构造函数构造出来的对象都可以继承原型上的属性和方法

   function  HandPhone(color,brand) {
    this.color = color;
    this.brand = brand;
   }
   HandPhone.prototype.ram = '64G';
   HandPhone.prototype.rom = '6G';
   HandPhone.prototype.intro = function () {
    console.log('I am '+ this.brand +' Phone')
   }
   var p1 = new HandPhone('red', 'HuaWei');
   var p2 = new HandPhone('white', 'MI');
   p1.intro();// I am HuaWei Phone;
   console.log(p1.ram);// 64g
   console.log(p1.rom);//6g

3. 构造函数里prototype里的constructor 指向本身。

可以修改constructor

// 一个构造函数
function TelePhone() {
}
//重新修改HandPhone的原型
HandPhone.prototype = {
    constructor :TelePhone//这里修改了HandPhone原型里的构造函数。
};
function  HandPhone(color,brand) {
    this.color = color;
    this.brand = brand;
}
HandPhone.prototype.ram = '64G';
HandPhone.prototype.rom = '6G';
HandPhone.prototype.intro = function () {
    console.log('I am '+ this.brand +' Phone')
}
var p1 = new HandPhone('red', 'MI')
p1.intro();
console.log(HandPhone.prototype);

proto是实例化后的结果.里面存着的是他的构造函数的原型。

function Car(){}
var car = new Car();
console.log(car,Car.prototype);

实例化后的对象可以修改proto的值；

function Person() {
}
Person.prototype.name = "张三";
var p1 = {
    name:'李四'
}
var person = new Person();
console.log(person.name);//张三
person.__proto__ = p1;
console.log(person.name);//李四

实例化之后的对象

function Person() { 
}
//person的原型添加一个name 属性
Person.prototype.name = '张三';
//实例化p1
var p1 = new Person();
//重新赋值Person的原型
Person.prototype = {
    name: '李四'
}
//此时虽然修改拿了name,但是p1已经实例化完毕。如果再实例化一个p2 那么p2的名字就会被改
console.log(p1.name);//张三
console.log(Person.prototype.name);//李四

解释

function Person() {}
Person.prototype.name = '张三';
var p1 = new Person();
// Person.prototype.name ='李四'
Person.prototype = {
    name: '李四',
    constructor: Person
}//可以理解成是一个重新赋值。堆里的内存地址发生变化。
console.log(p1.name);//张三
console.log(Person.prototype.name);
/***
 * 解释
 * Person 在实例化的过程中,
 *        隐式申明了一个 this ={
 *          __proto__:Person.prototype//Person.prototype 本身就是一个对象、
 *          }
 *   
 */

window和return

• return ```javascript //window和return

function test() { var a = 1; function add() { a++; console.log(a); } return add; } var add = test(); add();//2 add();//3 add();//4

- window
```javascript
function test() {
    var add = 1;
    function  add() {
        a++;
    }
    window.add = add;
}
test();
add();//2
add();//3
add();//4

• 自启动函数

  • return 方式

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

  • window 方式

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

    JS插件写法

    (function () {
    function Add() {
    }
    Add.prototype = {};
    window.Add = Add;
    }())
    var add = new Add();

    作业 ```javascript ;(function () { function Compute(opt) { this.firstNum = opt.firstNum; this.secondNum = opt.secondNum; } Compute.prototype = { minus:function () {

       return this.firstNum - this.secondNum;

    }, div:function () {

       return this.firstNum / this.secondNum;

    }, mul:function () {

       return this.firstNum * this.secondNum;

    }, plus:function () {

       return this.firstNum + this.secondNum;

    } } window.Compute = Compute; }())

var cp = new Compute({ firstNum: 1, secondNum:2 }) console.log(cp.minus()); console.log(cp.div()); ```