javascript 面向对象 new 关键字原型链构造函数

偏执的太偏执、 2022-03-19 14:16 257阅读 0赞

**JavaScript面向对象**  
***JavaScript 语言使用构造函数（constructor）作为对象的模板。所谓”构造函数”，就是专门用来生成实例对象的函数。它就是对象的模板，描述实例对象的基本结构。一个构造函数，可以生成多个实例对象，这些实例对象都有相同的结构***

1.  构造函数的首字母大写，区分一般函数。
2.  函数体内部使用了this关键字，代表了所要生成的对象实例。
3.  生成对象的时候，必须使用new命令。
4.  构造函数内部使用严格模式 'use strict'，防止当做一般函数调用，这样就会报错。

function Person(name, age, sex) {
        'use strict';
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    
    Person() 报错
    new Person("zhangxc", 29, "male");

***1、new关键字 命令内部实现***

**new.target属性**

***如果当前函数是new命令调用，new.target指向当前函数(构造函数的名称)，否则为undefined。***

function Test() {
      console.log(new.target === Test);
    }
    
    Test() // false
    new Test() // true

**2、this关键字**  
***this总是指向调用该方法的对象，在最外面调用就指向window***

**3、对象的继承**  
***JavaScript 语言的继承不通过 class，而是通过“原型对象”（prototype）实现。***

**prototype原型对象**

1.  每一个函数都有一个原型对象
2.  每一个实例对象都有一个 \_\_proto\_\_属性

**JavaScript 继承机制的设计思想就是，原型对象的所有属性和方法，都能被实例对象共享。也就是说，如果属性和方法定义在原型上，那么所有实例对象就能共享，不仅节省了内存，还体现了实例对象之间的联系。原型对象的作用，就是定义所有实例对象共享的属性和方法。这也是它被称为原型对象的原因，而实例对象可以视作从原型对象衍生出来的子对象。**

// 定义水果构造函数
    function Fruit(name, color) {
        this.name = name;
        this.color = color;
    }
    
    // 实例化apple对象
    var apple = new Fruit("apple", "red");
    
    // 实例化banana 对象
    var banana = new Fruit("banana", "yellow");
    
    // 如果他们有共同的属性和方法那么就使用 prototype
    // 修改 Fruit构造函数
    Fruit.prototype.address = "china";
    Fruit.prototype.eat = function() {
        console.log(this.name + "-----" + this.color);
    }
    
    apple.addess // china
    banana.address // china
    
    apple.eat()  // apple ---- red
    banana.eat() // banana ---- yellow
    
    
    function M1() {
      this.hello = 'hello';
    }
    
    function M2() {
      this.world = 'world';
    }
    
    **// 1、继承M1，M2自己的属性和方法(hasOwnProperty)**
    function S() {
      M1.call(this);
      M2.call(this);
    }
    **// 2、继承M1原型链上的属性和方法**
    S.prototype = Object.create(M1.prototype);
    **// 3、继承M2原型链上的属性和方法**
    Object.assign(S.prototype, M2.prototype);
    
    // 指定构造函数
    S.prototype.constructor = S;
    
    var s = new S();
    s.hello // 'hello'
    s.world // 'world'

**4、原型链**  
***最透彻的原型链讲解 哈哈***

**1. 每一个函数都有prototype属性指向他的原型对象**
    **2. 每一个对象都有__proto__属性指向他的原型对象**

**然后以Date()时间 构造函数为例讲解**  
**证明：**

var data = new Date();
    因为：
    data是一个实例对象所以他有__proto__属性指向他的原型对象
    Date是一个构造函数所以他有prototype属性指向他的原型对象
    所以：Date.prototype == data.__proto__    // Date{} true
    data.__proto__是一个对象
    因为：javascript规定所有对象都有原型
    所以： data.__proto__.__proto__  == Object.prototype // true
    这就是原型链了 data.__proto__.__proto__
    data对象继承了 Date Object 原型对象的属性和方法。

来源：[https://segmentfault.com/a/1190000018140664][https_segmentfault.com_a_1190000018140664]

[https_segmentfault.com_a_1190000018140664]: https://segmentfault.com/a/1190000018140664