[js高级] 原型与原型链

最新推荐文章于 2022-02-22 16:50:29 发布
最新推荐文章于 2022-02-22 16:50:29 发布
阅读量202 收藏 3
点赞数 1
分类专栏： # js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14993591/article/details/120428460
版权

文章目录

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


一、函数的prototype属性

  1. 每个函数都有一个prototype属性，它默认指向一个Object空对象(即称为: 原型对象)
 console.log(Date.prototype, typeof Date.prototype)
 function Fun () {

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

在这里插入图片描述

  1. 原型对象中有一个属性constructor，它指向函数对象
console.log(Date.prototype.constructor===Date)
console.log(Fun.prototype.constructor===Fun)

在这里插入图片描述

每个函数都有一个prototype属性，它默认指向一个Object空对象(即称为: 原型对象)
原型对象中有一个属性constructor，它指向函数对象
在这里插入图片描述

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

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

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

f1是由Foo创建的，f1 是Object

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://blog.csdn.net/qq_43652492/article/details/109746361

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
533_
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原型链图片
11-23
类，原型，构造函数
图解JS原型和原型链实现原理
10-14
JavaScript中的原型和原型链是其继承机制的核心，理解这两者对于深入学习JS至关重要。本文将通过详细的图解和实例代码，帮助你理解这两个概念及其实现原理。 首先，我们需要明白JavaScript的发展背景。JavaScript...
[JS]_proto_和prototype到底有啥区别
weixin_34194087的博客
08-20 454
是时候拿出我珍藏多年的这张图了： 首先，要明确几个点： 1.在JS里，万物皆对象。方法（Function）是对象，方法的原型(Function.prototype)是对象。因此，它们都会具有对象共有的特点。 即：对象具有属性__proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。 2.方法(Function...
JavaScript中__proto__与prototype的关系
weixin_33857230的博客
09-01 209
这里讨论下对象的内部原型(__proto__)和构造器的原型（prototype）的关系。   一、所有构造器/函数的__proto__都指向Function.prototype，它是一个空函数（Empty function） Number.__proto__ === Function.prototype // true Boolean.__proto__ === Function....
Javascript的原型链图
weixin_30780649的博客
10-12 614
90%的前端或者js程序员或者老师们对Javascript懂得不比这个多 给手机看的 但是这个图里的所有褐色单向箭头链就是Javascript的原型链（颜色标注对理解js原型链很关键） 这图中的各个__proto__ constructor .prototype 都是内部对象 这样画是为了简洁 举个例子 如果考虑__proto__ 作为内部对象 上图变为 ...
原型链图示
火焰
05-01 1013
1.基本函数原型链: 代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> &lt
js 原型对象和原型链理解
12-02
最近正在读《Javascript高级程序设计》，书中对原型对象和原型链的描述让我受益匪浅，下面仅用一个对比性的例子来说明。 我们经常会这么写 function Person () { this.name = 'John'; } var person = new ...
深入浅析js原型链和vue构造函数
10-17
在JavaScript中，原型链是实现对象继承的核心机制，它使得一个对象能够访问其构造函数的原型对象上的属性和方法。当我们尝试访问一个对象的属性时，如果该对象本身没有这个属性，JavaScript会沿着原型链向上查找，...
JavaScript原型链
03-25
JavaScript中的构造函数、`new`操作符和`prototype`属性也与原型链紧密相关。当我们使用`new`关键字调用一个构造函数时，会创建一个新的对象，这个新对象的`[[Prototype]]`被设置为构造函数的`prototype`属性所指向...
强大的原型和原型链
07-24
当试图访问一个对象上的属性或方法时，如果对象本身没有这个属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或方法为止。 #### 原型的使用方式 1. **原型使用方式 1**： - 首先定义一个构造...
JS原型链简单图解
weixin_33671935的博客
08-30 356
JS中原型链，说简单也简单。 首先明确： 函数（Function）才有prototype属性，对象（除Object）拥有__proto__。 首先，我画了一张图。 所谓原型链，指的就是图中的proto这一条指针链！ 原型链的顶层就是Object.prototype，而这个对象的是没有原型对象的。 可在chrome的控制台里面输入： Object.__proto__ ...
完整原型链详细图解（构造函数、原型、实例化对象）
热门推荐
spicyboiledfish的博客
05-03 1万+
一、首先说一下什么是构造函数： 构造函数：用来在创建对象时初始化对象。特点：构造函数名一般为大写字母开头；与new运算符一起使用来实例化对象。 举例： function Person(){} //Person构造函数 var p=new Person(); //Person构造函数创建对象,也可叫做实例化 二、什么是原型？ 原型：构造函数在实例化对象的过程中，系统自动创建出来与其相关联的一个空的对象。可以由构造函数.prototype来访问到。 举例：在实例
原型链图
weixin_43968658的博客
04-04 895
图解原型链
想搞全栈的前端
12-16 150
原型链图片分享
weixin_45432736的博客
09-15 113
分享几张本人学习原型链时，网上找到的几张图片。
详解js中的原型链，prototype与__proto__的关系
sweetyhyh的博客
05-03 100
说到prototype，就不得不先说下new的过程。 我们先看看这样一段代码： type="text/javascript"> var Person = function () { }; var p = new Person(); 很简单的一段代码，我们来看看这个new究竟做了什么？我们可以把new的过程拆分成以下三步： var p=
图解原型原型链
Dear_Mr的博客
07-14 798
图解原型原型链原型 ？在“类”中（也就是函数中）的prototype就指向一个原型对象，在实例中，__proto__就指向的是一个构造它的那个“类”（函数）的原型，通过protoype与__proto__就会形成一个原型链，对于一个实例来说，就是谁构造的我，我的__proto__就指向谁的原型，直到最顶层的Object，对于“类”（函数）来说，我的prototype指向的是我自己的原型，我里面也有_
原型链图解
m0_45382009的博客
02-22 88
图中由相互关联的原型组成的链状结构就是原型链，也就是蓝色的线： 详解：https://github.com/mqyqingfeng/Blog/issues/2
js高级原型与原型链练习题
最新发布
05-30
好的，我可以为您提供一些 JS 高级原型与原型链的练习题，希望对您有所帮助。 1. 创建一个构造函数 Person，它有属性 name 和 age。创建一个对象 john，它的 name 是 "John"，age 是 30。使用 Person 的原型对象...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值