关于javascript的原型和原型链，看我就够了

最新推荐文章于 2022-11-28 11:17:54 发布
最新推荐文章于 2022-11-28 11:17:54 发布
阅读量405 收藏
点赞数
分类专栏： 【Javascript点滴知识 】

温故

我们先回顾一下前两天讨论的内容

创建对象的三种方式

  • 通过对象直接量
  • 通过new创建对象
  • 通过Object.create()

js中对象分为两种

  • 函数对象
  • 普通对象

原型对象prototype

  • 每一个函数对象都有一个prototype属性，但是普通对象是没有的；
  • 普通对象都是通过函数创建的

在 ECMAScript 核心所定义的全部属性中，最耐人寻味的就要数 prototype 属性了。对于 ECMAScript 中的引用类型而言，prototype 是保存着它们所有实例方法的真正所在。换句话所说，诸如 toString()和 valuseOf() 等方法实际上都保存在 prototype 名下，只不过是通过各自对象的实例访问罢了。----《JavaScript 高级程序设计》

构造函数constructor

function Foo(name) {
    this.name = name;
}
var foo = new Foo('陌上寒');
 console.log(Foo.prototype.constructor===Foo)//true
 console.log(foo.constructor===Foo);//true
复制代码

原型对象有一个constructor属性，指向该原型对象对应的构造函数 foo 为什么有 constructor 属性？那是因为 foo 是 Foo 的实例。 那 Foo.prototype 为什么有 constructor 属性？？同理， Foo.prototype Foo 的实例。 也就是在 Foo 创建的时候，创建了一个它的实例对象并赋值给它的 prototype

隐式原型_proto_

在Firefox、Safari 和 Chrome 的每个对象上都有这个_proto_,属性 ，而在其他浏览器中是完全不可见的为了确保浏览器兼容性问题，不要直接使用 proto 属性）

// 普通对象的\__proto\__指向当前函数对象的原型，
console.log('陌上寒'.__proto__===String.prototype);//true
//原型对象(也属于普通对象)的__proto__指向当前函数对象的原型
console.log(String.prototype.__proto__===Object.prototype);//true
//内置函数对象的\__proto\__指向的都是ƒ () { [native code] }
console.log(Object.__proto__);//ƒ () { [native code] }
//Object的原型对象的\__proto\__为null
console.log(Object.prototype.__proto__)//null
复制代码
  • 普通对象的__proto__指向当前函数对象的原型，
  • 原型对象(也属于普通对象)的__proto__指向当前函数对象的原型
  • 内置函数对象的__proto__指向的都是ƒ () { [native code] }
  • 所有对象(除了Object.prototype)都存在_proto_
  • Object的原型对象的__proto__为null 好好消化上面的知识点，有助于我么讨论新的内容==>原型链

知新

原型链

  • 原型对象prototype
  • 构造函数constructor
  • 隐式原型_proto_ 通过三者之间的联系，形成了原型链 继续看一下我门昨天讨论过的代码
console.log('陌上寒'.__proto__===String.prototype);//true
console.log(String.prototype.__proto__===Object.prototype);//true
//等量代换，得出以下结论
console.log('陌上寒'.__proto__.__proto__===Object.prototype);//true
复制代码

我们刚才说过，普通对象的__proto__指向当前函数对象的原型 我们刚才还说过，普通对象都是通过函数创建的 根据以上两个结论我们分析一下上面的代码 ‘陌上寒’是字符串类型，’陌上寒’的构造函数是String(), 所以’陌上寒’的__proto__指向String的原型 String是js的内置构造函数，内置构造函数继承自Object String的原型对象String.prototype也是一个普通对象，它的__proto__指向Object的原型，即Object.prototype 所以

console.log('陌上寒'.__proto__.__proto__===Object.prototype);//true
复制代码

这就是原型链 我们继续品读以下代码

//我们创建一个构造函数Foo（要记得，构造函数命名，首字母要大写）
function Foo() {}
//通过我们自定义的构造函数。通过new操作符，我们实例化出来一个对象foo
const foo = new Foo()
//对象的__proto__指向当前函数对象(foo是同构Foo实例化出来的，所以foo的函数对象是Foo)的原型
console.log(foo.__proto__===Foo.prototype);
//原型对象也存在__proto__，指向该原型对象（Foo.prototype）所对应的函数对象（Object）的原型（好像有点绕，看代码就没那么绕了）
console.log(Foo.prototype.__proto__===Object.prototype);//true
//上面的如果懂了，这行代码就简单了，一个数学的等量代换，就得出了结论
console.log(foo.__proto__.__proto__===Object.prototype);//true
console.log('---我是分割线----');
//我们通过字面量创建了一个对象，等同于 const obj = new Object()
const obj = {}
//obj 是通过内置构造函数Object创建的，所以，obj的__proto__指向它的函数对象（Object）的原型（prototype）即：Object.prototype
console.log(obj.__proto__===Object.prototype);//true
console.log('---我是分割线----');//true
//创建一个对象b
const b = {}
//我们之前说过创建对象有三种方式，我们使用第三种方式创建一个对象b1，对象b1继承自对象b，也就是说，对象b是对象b1的__proto__
const b1 = Object.create(b)
//对象b是对象b1的__proto__
console.log(b1.__proto__===b);//true
//前面已经证实过，b.__proto__==Object.prototype，不再赘述
console.log(b.__proto__==Object.prototype);//true
//等量代换就得出以下结论
console.log(b1.__proto__.__proto__===b.__proto__);//true
console.log(b1.__proto__.__proto__==Object.prototype);//true
复制代码

我偷了一张图?，我们看一下

 

啊，好像很简单，我们看一下

 

//自定义构造函数A（构造函数命名首字母大写）创建方式等同于var A  = new Function()
var A = function(){}//等同于var A  = new Function()
//通过构造函数A，使用new操作符实例化一个对象a（A是a的构造函数，a是A创建出来的）
var a = new A()
//对象的的__proto__指向它所对象函数对象（A）的原型（A.prototype）
console.log(a.__proto__===A.prototype)//true
//A是通过js内置构造函数Function创建出来的,然而
console.log(A.prototype.__proto__===Function.prototype);//false
console.log(A.prototype.__proto__==Object.prototype);//true
console.log(Function.prototype)//ƒ () { [native code] }
复制代码

Function特例

我们重新修改一下上面的代码

var A  = new Function()
var a = new A()
复制代码

A.prototype是个函数对象，理论上他的__proto__应该指向 Function.prototype，就是他自己，自己指向自己，没有意义。 js一直强调万物皆对象，函数对象也是对象，给他认个祖宗，指向Object.prototype。Object.prototype._proto_ === null，保证原型链能够正常结束。 事实验证了这样一个道理

console.log(a.__proto__===A.prototype)//true
console.log(A.prototype.__proto__===Function.prototype);//false
console.log(A.prototype.__proto__==Object.prototype);//true
console.log(a.__proto__.__proto__==Object.prototype);//true
复制代码

A的原型对象的__proto__指向的是Object的原型 再看一张图

 

图片来源

 

  • 原型对象是构造函数的prototype属性，是所有实例化对象共享属性和方法的原型对象。
  • 实例化对象通过new构造函数得到，都继承了原型对象的属性和方法。
  • 原型对象中有个隐式的constructor，指向了构造函数本身。

再看一张图，细细品味

 

图片地址

 

总结

今天先讨论到这里，我们一起对今天的内容做一个总结 所有函数对象的\ _proto_ 都指向 Function.prototype，它是一个空函数（Empty function）ƒ () { [native code] }

var obj = {name: '陌上寒'}
var arr = [1,2,3]
var reg = /hello/g
var date = new Date
var err = new Error('exception')
console.log(obj.__proto__ === Object.prototype) // true
console.log(arr.__proto__ === Array.prototype)  // true
console.log(reg.__proto__ === RegExp.prototype) // true
console.log(date.__proto__ === Date.prototype)  // true
console.log(err.__proto__ === Error.prototype)  // true
复制代码

所有对象的 _proto_ 都指向其构造器的 prototype 原型链 原型链是实现继承的主要方法。

自己是由自己创建的，好像不符合逻辑，但仔细想想，现实世界也有些类似，你是怎么来的，你妈生的，你妈怎么来的，你姥姥生的，……类人猿进化来的，那类人猿从哪来，一直追溯下去……，就是无，（NULL生万物） 正如《道德经》里所说“无，名天地之始”。

function Person(){}
var person1 = new Person();
console.log(person1.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype) //true
console.log(Object.prototype.__proto__) //null

Person.__proto__ === Function.prototype; //true
console.log(Function.prototype)// function(){} (空函数)

var num = new Array()
console.log(num.__proto__ === Array.prototype) // true
console.log( Array.prototype.__proto__ === Object.prototype) // true
console.log(Array.prototype) // [] (空数组)
console.log(Object.prototype.__proto__) //null
console.log(Array.__proto__ === Function.prototype)// true
复制代码

我们一起连续讨论了那么多，相信你一定对js原型和原型链有了些认识，但是光有认识还是不够的，原型和原型链在实际场景中是怎么发挥作用的呢？我们如何将原型链的相关技能投入到开发中呢？我们明天继续讨论javascript的原型和原型链，不见不散

原文链接

相关文章

关于javascript的原型和原型链，看我就够了（一）

关于javascript的原型和原型链，看我就够了（二）

关于javascript的Object. hasOwnProperty，看我就够了

参考链接

JavaScript之原型与原型链

图解prototype、proto和constructor的三角关系

Function.proto===Function.prototype怎么解释？

最详尽的 JS 原型与原型链终极详解，没有「可能是」。（一）


作者：陌上寒
链接：https://juejin.im/post/5bdefa3c6fb9a049e129a575
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

barnett_y
关注
专栏目录
学习Array类型看这一篇就够了（Array类型特点，Array原型方法，浏览器sort底层实现，深浅拷贝）
反手一个bug的博客
09-11 453
文章目录一、创建Array类型1.1 创建数组1.2 不限制类型1.3 数组length二、原型方法2.1 转换方法2.2 数据添加移除方法2.3 重排序方法 除了Object之外，Array类型应该是ECMAScript中常用的类型，并且javaScript中的Array类型和其他语言中的数组非常的不同，具体javaScript中的Array类型，本文将由浅入深地从创建Array类型和原型方法两个大方向带大家彻底理解这个ECMAScript中的重要类型 一、创建Array类型 1.1 创建数组 创建数组有
java面试题，看我这篇就够了，前端后台应有尽有，包你通过面试
cencong863251的博客
04-03 3075
HTML&CSS部分 1、HTML中定义表格的宽度用80px和80%的区别是什么？ PX标识像素，%标识整个父标签宽度百分比 2、CSS样式定义优先级顺序是？ 内联样式最高优先权，然后是内部样式，然后才是外部样式 3、div和span的区别？ 　　DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表（共同点）。 　　两者最明显的区别在于DIV...
关于javascript的原型和原型链，看我就够了（一）
weixin_33762321的博客
11-02 129
关于js的原型和原型链，有人觉得这是很头疼的一块知识点，其实不然，它很基础，不信，往下看 要了解原型和原型链，我们得先从对象说起 创建对象 创建对象的三种方式： 对象直接量 通过对象直接量创建对象,这是最简单也是最常用的创建对象的方式 var empty = {}; var pos = {x:12,y:23}; var pos2 = {x:pos.x,y:pos.y+1}; var author=...
js的原型链图解
m0_73737249的博客
11-28 388
原型链图解
前端总结·基础篇·JS（一）原型、原型链、构造函数和字符串（String）
weixin_34268579的博客
03-06 185
前端总结系列 前端总结·基础篇·CSS（一）布局 前端总结·基础篇·CSS（二）视觉 前端总结·基础篇·CSS（三）补充 前端总结·基础篇·JS（一）原型、原型链、构造函数和字符串（String） 前端总结·基础篇·JS（二）数组深拷贝、去重以及字符串反序和数组（Array） 前端总结·基础篇·JS（三）arguments、callee、call、apply、bind及函数封装和构造函数 前端总...
JS基础知识(二)原型和原型链
Daisy
11-18 430
原型和原型链 问题： 如何准确判断一个变量是数组类型 写一个原型链继承的例子 描述new 一个对象的过程 Zepto（或其他框架）源码中如何使用原型链 知识点： 1.构造函数 function Foo (name, age) { this.name = name; this.age = age; this.class = 'class-...
Web前端高级编程学习笔记7：对象进阶
L1nCyKkk的博客
04-20 333
JavaScript对象的特征 JavaScript的基本数据类型，一种复合值，可看做是属性的无序集合。 每个属性都是一个名/值对。 属性名是字符串，因此可以把对象看成是从字符串到值的映射。 对象除了可以保持自有的属性，还可以从一个称为原型的对象继承属性。 原型式继承（ prototypal inheritance )是JavaScript的核心特征。 对象是动态的，可以增加或删除属性。 除了字符串、数值、true 、 false 、null和 undefined ，其他值都是对象。 对象最常
关于javascript的Object. hasOwnProperty，看我就够了
最新发布
06-06
这个方法只会检查对象本身的属性，不会检查原型链上的属性。例如： ``` const obj = { name: 'John', age: 30 }; console.log(obj.hasOwnProperty('name')); // true console.log(obj.hasOwnProperty('toString')...
为React Native开发写的JS和React入门知识
热门推荐
Leo的专栏
04-20 2万+
来自Leo的原创博客，转载请著名出处我的stackoverflow前言 想来想去，还是需要写一篇文章来介绍下JavaScript和React的基本知识。最初开发ReactNative的时候，完全没接触过React，大学那会简单学了点JS。毕业后一直在某五百强外企上班。做的东西也乱七八糟的，搞过大数据，搞过物联网，不过看我博客的同学应该知道，我对iOS和Android还是比较喜欢的。所以，博客都是
JavaScript笔记
shine_my的博客
03-13 3402
JavaScript笔记
vue新手入门出现function () { [native code] }错误
qq_41966009的博客
07-14 1万+
控制台输出错误： [Vue warn]: Unknown custom element: <p1> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 页面提示： function () { [native code] }，无法出现我们想要的内容 页面代码： <!DOCTYPE html> <html la
复习面向对象 -- 原型与原型链
weixin_30689307的博客
09-20 91
　　面向对象中原型以及原型链非常重要，复习面向对象，学习一下原型和原型链，创建对象部分可以看前一个文章，传送门，继承部分可以看后一个文章，传送门 什么是原型： 　　原型有两种形式：prototype和__proto__；对应的呈现方式不同。 　　prototype：是函数的一个属性，这个属性的值是一个对象。所以一切的函数都有原型，这个原型就是prototype。 ...
object.create(null) 和 {}创建对象的区别
weixin_30457065的博客
07-12 327
原文 　　简书原文：https://www.jianshu.com/p/43ce4d7d6151 创建对象的方法 　　如果要创建一个空的对象，可以使用如下的三种方法 var obj1 = {}; var obj2 = Object.create(null); var obj3 = new Object(); 创建空对象的区别 　　要创建一个干净的空对象，应该使用Obje...
《六》Javascript 中的原型和原型链
花铛
03-13 238
JS 中所有的对象都有一个__proto__属性，指向一个对象类型的值，称之为对象的隐式原型。
一道面试题详解原型和原型链的基础知识
qq_35895679的博客
07-27 441
1.每一个类（函数）都具备prototype，并且属性值是一个对象 2.对象上天生具备一个属性：constructor，指向类本身 3.每一个对象（普通对象、prototype、实例、函数等）都具备：proto，属性值是当前实例所属类的原型 函数数据类型：普通函数、类（内置类/自定义类）、箭头函数 （都是Function的实例） 对象数据类型：普通对象、数组对象、正则对象、日期对象、实例对象、函数对象（函数也是一个对象，也像普通对象一样，有自己的键值对）、类的prototype也是对象 （都是Ob.
this指针
qcg14774125的博客
02-15 298
function fn() { this.a = 0; this.b = function() { alert(this.a) } } fn.prototype = { b: function() { this.a = 20; alert(this.a); }, c: function() { ...
函数的6种不同调用方式决定this指向的不同
Codefreyy
03-31 300
1、普通函数 this指向window 2、对象的方法 this指向的是对象o 3、构造函数 this指向alieen这个实例对象，原型对象里的this指的也是alieen这个实例对象
构造函数模式扩展
m0_37068028的博客
10-13 452
构造函数模式扩展1. 构造函数模式中new Fn()执行，如果Fn不需要传递参数的话，后面的小括号可以省略 function Fn() { this.x = 100; this.getX = function () { console.log(this.x) } } var f1 = new Fn；// 不传参数可以省略()2.
关于this指向的问题
6块腹肌的博客
07-04 1469
1、求解答为什么x.x调用结果会是undefined function a(xx){ this.x = xx; return this; } var x = a(5); var y = a(6); console.log(x.x); console.log(y.x); 提问者问题是： 求解答为什么x.x调用结果会是undefined 现在来分析下为什么会输出undefi...
深入解析JavaScript原型、原型对象与原型链
本文将深入解析JavaScript中的核心概念——原型、原型对象以及原型链。JavaScript是一种动态类型语言，其独特的原型系统对于理解类和对象的行为至关重要。 首先，让我们理解什么是原型。在JavaScript中，每个函数都...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值