原型、原型链 - 咏竹莉

一、构造函数

1.1 构造函数分为实例成员和静态成员

实例成员： 实例成员就是在构造函数内部，通过this添加的成员。实例成员只能通过实例化的对象来访问

静态成员： 在构造函数本身添加的成员，只能通过构造函数来访问

           function Star(name,age) {
                // 实例成员
                this.name = name;
                this.age = age
            }
            // 静态成员
            Star.sex = '女'
            let stars = new Star('小红', 18);
            console.log(stars); // Star {name: ”小红“, age: 18}
            console.log(stars.sex); // undefined  实例无法访问sex属性
            // console.log(stars._proto_.constructor.sex)

            console.log(Star.name);   // Star
            console.log(Star.sex);    // 女

1.1.2 prototype对象的constructor() 属性，直接指向"类" 的本身, 这与ES6的行为是一致的

console.log(Star.prototype.constructor)

console.log(Star.prototype.constructor === Star)  // true  函数的prototype 对象的constructor()属性，直接指向“类”本身

1.2 通过构造函数创建对象

1.2.1 如何通过构造函数创建一个对象？

            function Father(name) {
                this.name = name
            }
            let son = new Father('xiaozhu')
            console.log(son)

1.3 定义构造函数的方法

公共属性定义到构造函数里，公共方法放到原型对象上

二、什么是原型？

1. 原型总结：

· 所有引用类型对象 (函数，数组，对象) 都拥有 __proto__属性（隐式原型）

· 所有函数除了有__proto__ 属性之外还有 prototype 属性（显式原型）

· 所有实例对象的 __proto__属性指向它构造函数的 prototype

· 原型对象：每创建一个函数，该函数会自动带有一个 prototype 属性，该属性是一个指针，指向了一个对象，我们称之为原型对象

2. 原型的作用：

共享方法

3. 原型中this的指向：

原型中this的指向是实例

4. 原型查找方法：

例如: 查到obj的dance方法

        // 查找obj的dance方法
        function Star(name) {
            this.name = name;
            //(1) 首先现在obj对象身上看是否有dance方法， 如果有，则执行对象身上的方法
            this.dance = function() {
                console.log(`${this.name}` + 1);
    
            } 
        }
      
        // (2) 如果没有dance方法，就去构造函数原型对象prototype上查找dance方法
        Star.prototype.dance = function() {
            console.log(`${this.name}` + 2)
        }

        // (3)如果再没有dance方法，就去Object原型对象prorotype上去查找dance方法
        Object.prototype.dance = function() {
            console.log(`${this.name}` + 3);
        }

        //（4）如果在没有，则会报错
        const star1 = new Star('xiaozhu');
        star1.dance(); // xiaozhu1

(1) 首先看obj对象身上是否有dance方法，如果有，则执行对象身上的方法，

(2) 如果没有dance方法，就去构造函数原型对象prototype身上去查找dance方法

(3) 如果原型对象上没有dance方法，就去Obejct原型对象prototype身上去查找dance 这个方法

(4) 如果再没有，就会报错

5. 原型的构造器

原型的构造器指向构造函数

 function Star(name) {
    this.name = name;
}
let obj = new Star('小红');
console.log(Star.prototype.constructor === Star);//true
console.log(obj.__proto__.constructor === Star); //true

下面az, bz , cz 分别对应的数组、对象、函数

可以看到，三者都有一个属性: __prtoto__

这个__proto__ ，称作隐式原型

除此之外，cz还有一个属性： prototype , 这个prototype称作显式原型

函数除了有__proto__属性之外还拥有 prototype 属性，我们借助构造函数来寻找二者之间的关系。如下图

总结如下 (结合上图更容易理解)：

1. 实例对象a只有__proto__（隐式原型），构造函数既有 __proto__（隐式原型）也有prototype（显式原型）

2. __proto__ 和 prototype 都是一个对象，既然是对象，就表示他们也有一个 __proto__

3. 实例对象a的隐式原型指向了它构造函数的显示原型，指向的意思就是恒等于

4. 当调用某种方法或查找某种属性时，首先会在自身调用和查找，如果自身并没有该属性或方法，则会去它的__proto__属性中调用查找，也就是它构造函数的prototype 中调用查找。

三、什么是原型链？

1）原型链：原型链是原型对象创建的历史记录，当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，就会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没找到就会再到构造函数的prototype的 __proto__中查找，这样一层一层向上查找就会形成一个链式结构

也可以理解为原型链继承时先查找自身属性，当自身属性不存在时，会在原型链中逐级查找

2) hasOwnProperty 函数：可以用来检查对象自身是否含有某个属性，返回值是布尔值，当属性不存在时，不会向上查找对象原型链， hasOwnProperty 是javascript 中唯一一个处理属性但是不查找原型链的函数

3）原型链小结:

· 一直向上查找，直到到null还没有找到，则返回undefined

· Object.prototype.__proto__ === null

先看下图，提出一个问题：

1. 在Object的显示原型添加属性b, 为什么示例对象p 能使用此属性呢? p.b = b

2. 为什么 p.a 为undefined

如下所示

1. 实例对象p的隐式原型 (__proto__) 是一个对象，有两个属性： constructor 和 __proto__

2. p.__proto__.constructor 返回的结果为构造函数Person

3. p.__proto__.__proto__.constructor 返回的结果为Object()函数

什么是原型链？原型链解决的问题是什么？

1) 原型链解决的主要是继承的问题，原型与原型的层层链接

2）构造函数Parent、Parent.prototype 和实例 p 的关系如下 : p.__proto__ === Parent.prototype

3) prototype 和 proto 区别是什么？

a. prototype 是构造函数的属性

b. __proto__ 是每个实例都有的属性，可以访问 prototype 属性

c. 实例的__proto__ 与其构造函数的prototype 指向的是同一个对象

posted on 2021-04-23 11:15 咏竹莉阅读(95) 评论(0) 收藏举报

一、 构造函数

1.1 构造函数分为 实例成员 和 静态成员