[js高级] 原型与原型链

文章目录

• ​​一、函数的prototype属性​​
• ​​二、给原型对象添加属性（一般都是方法）​​
• ​​三、显式原型与隐式原型​​
• ​​四、原型链​​

• ​​原型链​​
• ​​构造函数/原型/实例对象的关系(图解)​​
• ​​函数的显示原型指向的对象默认是空Object实例对象（但Object不满足）​​
• ​​所有函数都是Function的实例（包含Function）​​
• ​​Object的原型对象是原型链尽头​​

• ​​原型链属性问题​​

• ​​instanceof是如何判断的?​​

• ​​面试题​​

• ​​题1：​​
• ​​题2：​​

• ​​**总结：**​​

显式原型属性prototype
隐式原型属性prototype

一、函数的prototype属性

1. 每个函数都有一个prototype属性，它默认指向一个Object空对象(即称为: 原型对象)

console.log(Date.prototype, typeof Date.prototype)
 function Fun () {

 }
 console.log(Fun.prototype)  // 默认指向一个Object空对象(没有我们的属性)

2. 原型对象中有一个属性constructor，它指向函数对象

console.log(Date.prototype.constructor===Date)
console.log(Fun.prototype.constructor===Fun)

二、给原型对象添加属性（一般都是方法）

作用：函数的所有实例对象自动拥有原型中的属性（方法）

Fun.prototype.test = function () {
  console.log('test()')
}
var fun = new Fun()
fun.test()

function F() {

}
F.prototype.age = 12 //添加属性
F.prototype.setAge = function (age) { // 添加方法
  this.age = age
}
// 创建函数的实例对象
var f = new F()
console.log(f.age)
f.setAge(23)
console.log(f.age)

三、显式原型与隐式原型

1. 每个函数function都有一个​​prototype​​，即显式原型（属性）
2. 每个实例对象都有一个​​__proto__​​，可称为隐式原型（属性）
3. 对象的隐式原型的值为其对应构造函数的显式原型的值

//定义构造函数
function Fn() {

}
// 1. 每个函数function都有一个prototype，即显式原型属性, 默认指向一个空的Object对象
console.log(Fn.prototype)

// 2. 每个实例对象都有一个__proto__，可称为隐式原型
//创建实例对象
var fn = new Fn()
console.log(fn.__proto__)

// 3. 对象的隐式原型的值为其对应构造函数的显式原型的值
console.log(Fn.prototype===fn.__proto__) // true

4. 内存结构

//定义构造函数
function Fn() {   // 内部语句: this.prototype = {}

}
console.log(Fn.prototype)

var fn = new Fn()  // 内部语句: this.__proto__ = Fn.prototype

console.log(fn.__proto__)
console.log(Fn.prototype===fn.__proto__)

//给原型添加方法
Fn.prototype.test = function () {
  console.log('test()')
}
//通过实例调用原型的方法
fn.test()

5. 总结：

函数的​​prototype​​​属性：在定义函数时自动添加的，默认值是一个空​​Object​​​对象。
对象的​​​__proto__​​​属性：创建对象时自动添加的，默认值为构造函数的 ​​prototype​​​ 属性值。
能直接操作显式原型，但不能直接操作隐式原型（ES6之前）

四、原型链

原型链

1. 访问一个对象的属性时，先在自身属性中查找，找到返回；如果没有，再沿着__proto__这条链向上查找，找到返回；如果最终没找到，返回undefined。
2. 别名：隐式原型链
3. 作用：查找对象的属性（方法）
   

console.log(Object)
        console.log(Object.prototype)

function Fn() {
   this.test1 = function () {
        console.log('test1()')
    }
}
console.log(Fn.prototype)

function Fn() {
            this.test1 = function () {
                console.log('test1()')
            }
        }

        Fn.prototype.test2 = function () {
            console.log('test2()')
        }
        console.log(Fn.prototype)

Fn.prototype是个对象，具有​​__proto__​​​属性，也是object的实例，Fn.prototype的​​__proto__​​就等于object的原型对象

每一个对象天生自带一个属性, 叫做​​__proto__​​​, 指向所属构造函数的 ​​prototype​​​ Fn.prototype天生自带​​__proto__​​,指向object的​​prototype​​

function Fn() {
            this.test1 = function () {
                console.log('test1()')
            }
        }

        Fn.prototype.test2 = function () {
            console.log('test2()')
        }
        
        var fn = new Fn()
        console.log(fn)

​​fn.__proto__​​​等于​​Fn.prototype​​ ()

每一个对象天生自带一个属性, 叫做​​__proto__​​​, 指向所属构造函数的 ​​prototype​​

构造函数/原型/实例对象的关系(图解)

var o1 = new Object();
 var o2 = {};

function Foo(){  }

Foo()是个函数，也是对象，具有​​__proro__​​​属性
只要是函数, 就是大写Function的实例;
​​​__proto__​​指向所属构造函数的 ​​prototype​​

Foo()的​​__proro__​​​指向​​Function.prototype​​

Object ()是个函数，也是对象，具有​​__proro__​​属性
只要是函数, 就是大写Function的实例;
内置构造函数 Object 是 内置构造函数 Function 的实例;

Object 的​​__proro__​​​指向​​Function.prototype​​

Function自身能够生成自身，即Function的原型就是Function。

Function的​​__proro__​​​指向​​Function.prototype​​

在JS中Object、Function既是对象、也是函数

所有函数的​​__proro__​​指向都是一样的，都是​​Function.prototype​​

函数的显示原型指向的对象默认是空Object实例对象（但Object不满足）

console.log(Fn.prototype instanceof Object) // true
console.log(Object.prototype instanceof Object) // false
console.log(Function.prototype instanceof Object) // true

所有函数都是Function的实例（包含Function）

console.log(Function.__proto__===Function.prototype)  // true

Object的原型对象是原型链尽头

console.log(Object.prototype.__proto__) // null

原型链属性问题

1. 读取对象的属性值时：会自动到原型链中查找
2. 设置对象的属性值时：不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值
3. 方法一般定义在原型中，属性一般通过构造函数定义在对象本身上

function Fn() {

}
Fn.prototype.a = 'xxx'
var fn1 = new Fn()
console.log(fn1.a, fn1)

var fn2 = new Fn()
fn2.a = 'yyy'
console.log(fn1.a, fn2.a, fn2)

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

Person.prototype.setName = function (name) {
  this.name = name
}

var p1 = new Person('Tom', 12)
p1.setName('Bob')
console.log(p1)

var p2 = new Person('Jack', 12)
p2.setName('Cat')
console.log(p2)
console.log(p1.__proto__===p2.__proto__) // true

instanceof是如何判断的?

• 表达式: A instanceof B
• 如果B函数的显式原型对象在A对象的原型链上, 返回true, 否则返回false
• Function是通过new自己产生的实例

//案例1
function Foo() {  }
var f1 = new Foo()
console.log(f1 instanceof Foo) // true

console.log(f1 instanceof Object) // true

//案例2
console.log(Object instanceof Function) // true

所有函数都是Function的实例（包含Function）
内置构造函数 Object 是 内置构造函数 Function 的实例

console.log(Object instanceof Object) // true

只要是对象，就是Object的实例

console.log(Function instanceof Function) // true

所有函数都是Function的实例（包含Function）

console.log(Function instanceof Object) // true

只要是对象，就是Object的实例
函数也是一个对象

function Foo() {}
console.log(Object instanceof  Foo) // false

面试题

题1：

function A () {

}
A.prototype.n = 1;

var b = new A();

A.prototype = {
  n: 2,
  m: 3
};

var c = new A();
console.log(b.n, b.m, c.n, c.m);  //1 undefined 2 3

function A() {

  }
  A.prototype.n = 1;

  var b = new A();

  A.prototype = {
      n: 2,
      m: 3
  };

  var c = new A();
  console.log('A.prototype:',A.prototype)
  console.log('b:',b)
  console.log('c:',c)

题2：

function F (){}
Object.prototype.a = function(){
  console.log('a()')
};
Function.prototype.b = function(){
  console.log('b()')
};

var f = new F();
console.log(f);
console.log(Object.prototype);
console.log(Function.prototype);
f.a();
f.b();
F.a();
F.b();

console.log(f);
console.log(Object.prototype);
console.log(Function.prototype);

f.a();

运行结果：打印a()

f.a的查找路径: f自身: 没有 —> f.proto(Foo.prototype): 没有—> f.proto.proto(Object.prototype): 找到a，故打印出：a()。

f.b();

报错

f.b的查找路径: f自身: 没有 —> f.proto(Foo.prototype): 没有 —> f.proto.proto (Object.prototype): 没有，故报错。

F.a();

F.a的查找路径: F自身: 没有 —> F.proto(Function.prototype): 没有 —> F.proto.proto(Object.prototype): 找到a，故打印出：a()。

F.b();

F.b的查找路径: F自身: 没有 —> F.proto(Function.prototype): 找到b，故打印出：b()。

首先，要明确几个点：
1.在JS里，万物皆对象。方法（Function）是对象，方法的原型(Function.prototype)是对象。因此，它们都会具有对象共有的特点。
即：对象具有属性__proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。

2.方法(Function)
方法这个特殊的对象，除了和其他对象一样有上述_proto_属性之外，还有自己特有的属性——原型属性（prototype），这个属性是一个指针，指向一个对象，这个对象的用途就是包含所有实例共享的属性和方法（我们把这个对象叫做原型对象）。原型对象也有一个属性，叫做constructor，这个属性包含了一个指针，指回原构造函数。

好啦，知道了这两个基本点，我们来看看上面这副图。
1.构造函数Foo()
构造函数的原型属性Foo.prototype指向了原型对象，在原型对象里有共有的方法，所有构造函数声明的实例（这里是f1，f2）都可以共享这个方法。

2.原型对象Foo.prototype
Foo.prototype保存着实例共享的方法，有一个指针constructor指回构造函数。

3.实例
f1和f2是Foo这个对象的两个实例，这两个对象也有属性__proto__，指向构造函数的原型对象，这样子就可以像上面1所说的访问原型对象的所有方法啦。

另外：
构造函数Foo()除了是方法，也是对象啊，它也有__proto__属性，指向谁呢？
指向它的构造函数的原型对象呗。函数的构造函数不就是Function嘛，因此这里的__proto__指向了Function.prototype。
其实除了Foo()，Function(), Object()也是一样的道理。

原型对象也是对象啊，它的__proto__属性，又指向谁呢？
同理，指向它的构造函数的原型对象呗。这里是Object.prototype.

最后，Object.prototype的__proto__属性指向null。

总结：

1. 对象有属性__proto__,指向该对象的构造函数的原型对象。
2. 方法除了有属性__proto__,还有属性prototype，prototype指向该方法的原型对象。
3. 每个函数function都有一个prototype，即显式原型（属性）
   每个实例对象都有一个__proto__，可称为隐式原型（属性）
   对象fn的隐式原型的值为其对应构造函数Fn的显式原型的值
   ​​Fn.prototype===fn.__proto__)​​
   
   
   
   
   
   

参考:

​​ https://gitee.com/hongjilin/hongs-study-notes/blob/master/%E7%BC%96%E7%A8%8B_%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/HTML+CSS+JS%E5%9F%BA%E7%A1%80%E7%AC%94%E8%AE%B0/JavaScript%E7%AC%94%E8%AE%B0/A_JavaScript%E8%BF%9B%E9%98%B6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0.md#%E4%BA%8C%E5%87%BD%E6%95%B0%E9%AB%98%E7%BA%A7 ​

​​ https://www.zhihu.com/question/34183746/answer/59043879 ​​