构造函数与原型对象

1.构造函数

构造函数：构造函数主要用来创建对象，并为对象的成员赋初始值。

function Person(name, age) {
    this.name = name;
    this.age = age;
}

var p1 = new Person(\'张三\', 18);
var p2 = new Person(\'李四\', 19);
console.log(p1.name); // 输出结果：张三
console.log(p2.age); // 输出结果：19

2.静态成员和实例成员

实例成员是指实例对象的成员，而静态成员是指通过类或构造函数访问的成员。

class Student{
    constructor(name){
        this.name = name;
    }
    show(){

        console.log(\"学校:\",Student.school);
        console.log(\"姓名:\",this.name);
    }
}

Student.school = \"邮电大学\";    //添加静态成员school

var s1 = new Student(\"张三\");

var s2 = new Student(\"李四\");

s1.show();
s2.show();

3.原型对象

原型对象：每个构造函数都有一个原型对象存在，这个原型对象通过构造函数的prototype属性来访问。

function Person() {} // 定义函数
console.log(Person.prototype); // 输出结果：Person {}
console.log(typeof Person.prototype); // 输出结果：object

注意：

1. 构造方法的原型对象是object类型
2. prototype属性是默认存在的

案例：利用原型对象共享方法

function Person(name){

    this.name = name;
    function sayHello(){

        console.log(\"西安\");
    }
}

//输出Person的原型对象
console.log(\"Person的原型对象:\",Person.prototype);

//构造方法的原型是什么类型：
console.log(\"原型对象的类型:\",typeof Person.prototype);

var p1 = new Person(\"张三\");

var p2 =new Person(\"李四\");

//通过原型对象给Person增加方法
Person.prototype.showAddress = function(address){

    console.log(\"地址:\",address);
}

Person.prototype.showName = function(){
    console.log(\"姓名:\",this.name);
}

p1.showAddress(\"西安市长安区\");
p2.showAddress(\"西安市雁塔区\");

console.log(p1.showAddress === p2.showAddress);    //结果为true

p1.showName();
p2.showName();

原型链

1.访问对象的原型对象

对象的原型对象：每个对象都有一个__proto__属性，这个属性指向了对象的原型对象。

function Person() {}

var p1 = new Person();

console.log(p1.__proto__);    //输出结果：Person {}

console.log(p1.__proto__ === Person.prototype);    // 输出结果：true

2.实例对象与原型对象

（1）实例对象

实例对象：使用new运算符创建的对象。

（2）原型对象

1. 通过构造方法名(类名).prototype得到的对象
2. 通过对象的__proto__属性得到的对象

3.实例对象与原型对象的关系

4.访问对象的构造方法

对象的构造函数：在原型对象里面有一个constructor属性，该属性指向了构造函数。

（1）通过原型对象访问构造函数

构造方法名(类名).prototype.constructor

function Student(name,gender){    //构造方法

    this.name = name;
    this.gender = gender;
}

var s1 = new Student(\"郭靖\",\"男\");

var s2 = new Student(\"黄蓉\",\"女\");

console.log(\"原型对象访问构造方法:\",Student.prototype.constructor);

console.log(\"原型对象访问构造方法:\",Student.prototype.constructor === Student);    //结果为true

（2）通过实例对象访问构造方法

对象名.constructor

function Student(name,gender){    //构造方法

    this.name = name;
    this.gender = gender;
}

var s1 = new Student(\"郭靖\",\"男\");

var s2 = new Student(\"黄蓉\",\"女\");

console.log(s1.constructor);    //实例对象方法构造方法

案例：用赋值方式修改原型对象为新的对象，就无法访问构造器函数。

function Person(){}    

var p1 = new Person();

console.log(\"构造方法:\",p1.constructor);    //结果为：构造方法: function Person(){}

Person.prototype = {
    satHello: function(){    //方法一
        console.log(\"Hello\");
    }
}

// Person.prototype.satHello = funtion(){    //方法二，通过原型给对象增加一个方法
//     console.log(\"Hello\");
// }

var p2 = new Person();

console.log(\"构造方法:\",p2.constructor);    //结果为：构造方法: function Object() { [native code] }

5.构造函数、原型对象和实例对象之间的关系

6.原型对象的原型对象

原型对象的原型对象：原型对象也是对象，那么这个对象应该也会有一个原型对象存在。

function Person(){}

//输出Person的原型对象
console.log(\"Person的原型对象:\",Person.prototype);    //输出结果为：Person的原型对象: Person {}

//输出Person的原型对象的原型对象
console.log(\"Person的原型对象的原型对象:\",Person.prototype.__proto__);    //输出结果为：Person的原型对象的原型对象: {}

//输出Person的原型对象的原型对象的构造方法
console.log(\"Person的原型对象的原型对象的构造方法:\",Person.prototype.__proto__.constructor);    //Person的原型对象的原型对象的构造方法: function Object() { [native code] }

7.原型链结构特点

1. 每个构造函数都有一个prototype属性指向原型对象。
2. 原型对象通过constructor属性指向构造函数。
3. 通过实例对象的__proto__属性可以访问原型对象。
4. Object的原型对象的__proto__属性为null。

原型链结构图：

8.成员查找机制

1. JavaScript首先会判断实例对象有没有这个成员
2. 如果没有找到，就继续查找原型对象的原型对象
3. 如果直到最后都没有找到，则返回undefined。

function Person(){
    this.name = \"张三\";
}

Person.prototype.name = \"李四\";

var p = new Person();

console.log(p.name);    //输出结果为：张三

delete p.name;    //删除对象p的name属性

console.log(p.name);    //输出结果为：李四

delete Person.prototype.name;    //删除原型对象的name属性

console.log(p.name);    //输出结果为：undefined

9.【案例】利用原型对象扩展数组方法

Array.prototype.sum = function(){
    
    var sum = 0;
    for(var i=0;i<this.length;i++){
        sum += this[i];
    }
    return sum;
}

var arr = new Array(1,2,3);

console.log(arr.sum());    //输出结果为6

来源：https://blog.csdn.net/weixin_62343228/article/details/123132192
本站部分图文来源于网络，如有侵权请联系删除。