Object.prototype 原型和原型链
Object.prototype 原型和原型链
原型
Javascript中所有的对象都是Object的实例,并继承Object.prototype的属性和方法,有些属性是隐藏的。换句话说,在对象创建时会存在预定义的属性,其中有一个属性就是原型对象。在函数对象中存在原型对象prototype,在普通对象中没有prototype
,但存在__proto__
。或者说使用function定义的对象与使用new操作符生成的对象之间有一个重要的区别,这个区别就是function定义的对象有一个prototype属性,使用new生成的对象就没有这个prototype属性,存在__proto__
。
var o =new Object();
console.log(o.__proto__);
console.log(o.prototype);//undefinedvar fn = function(){}
console.log(fn.prototype);//Object {constructor: function}
var f1 = new fn();
console.log(f1.__proto__);
console.log(f1.__proto__===fn.prototype);//true
原型链
那么__proto__
是什么?每个对象都会在其内部初始化一个属性,就是__proto__
。
普通对象中的__proto__
是什么呢? Object的本质函数对象,是通过new Function()创建,所以Object.__proto__
指向Function.prototype
。同理,Function也是函数对象,因此Function.__proto__
同样指向Function.prototype
。 Object.prototype
对象也有__proto__
属性,但它比较特殊,为null。这个由__proto__
串起来的直到Object.prototype.__proto__
为null的链就是原型链。
console.log(Object.__proto__ === Function.prototype);//true
console.log(Function.__proto__===Function.prototype);//true
console.log(Object.prototype.__proto__);//null
当我们访问一个对象的属性 时,如果这个对象内部不存在这个属性,那么他就会去__proto__
里找这个属性,这个__proto__
又会有自己的__proto__
,于是就这样 一直找下去,也就是我们平时所说的原型链的概念。参考下面的例子:
var Fn = function(){};
Fn.prototype.Hello = function(){console.log("Hello World");}
var f1 = new Fn();
f1.Hello();//Hello World
首先var f1=new fn(),f1是Fn的实例,可以得出f1.__proto__=Fn.prototype
。当我们调用f1.hello()
时,首先f1中没有Hello
这个属性,于是,它会到他的__proto__
中去找,也就是Fn.prototype
,而我们在上面定义了 Fn.prototype.Hello=function(){}; 于是,就找到了对应的方法。
从一个更复杂的例子中看原型链的原理:
var Person = function() {};
Person.prototype.Name = function() {console.log("person name");
}
Person.prototype.Sex = "male or female";var Younger = function() {};
Younger.prototype = new Person();
Younger.prototype.Age = function() {console.log("14-28")
};
Younger.prototype.Sex = "female";var Ann = new Younger();
Ann.Name(); //person name
console.log(Ann.Age()); //14-28
console.log(Ann.Sex); //female
对上述代码,我们可以进行如下分析:
var Younger = function() {}
===>:Younger.__proto__=Person.prototype
,
Younger.prototype = new Person()
===>:Younger.prototype.__proto__ = Person.prototype
,
var Ann = new Younger()
===>Ann.__proto__=Younger.prototype
,
综上可得:
Ann.__proto__.__proto__ = Person.prototype
Ann
本身没有Name()
方法,于是从Ann.__proto__
(Younger.prototype
)中找,仍没有找到于是在向上一层Ann.__proto__.__proto__
(Person.prototype
)中寻找,最终在Person.prototype
中找到对应的方法并调用。
同理,Ann
本身并没有Age()
方法,但在Ann.__proto__
(Younger.prototype
)存在。
对于Ann.Sex
,在Ann.__proto__
(Younger.prototype
)中已经能够找到,便不再向上寻找,因此输出是female
。
转载于:https://www.cnblogs.com/Nancy-wang/p/6903221.html
Object.prototype 原型和原型链相关推荐
- 原型和原型链的理解(Function,Object特例深入理解)
原型我们可以分为显式原型和隐式原型. 显式原型: 每个函数都有一个prototype属性,即显式原型(属性),它默认指向一个object空对象(称为原型对象): 而原型对象中有一个属性construc ...
- JavaScript原型与原型链(总结篇)
系列文章推荐 JavaScript原型与原型链(基础篇) JavaScript原型与原型链(进阶篇) JavaScript原型与原型链(总结篇) 1 构造函数和实例对象 构造函数的prototype属 ...
- 的函数原型_JS基础函数、对象和原型、原型链的关系
JS的原型.原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对 ...
- JavaScript深入之从原型到原型链
JavaScript深入系列的第一篇,从原型与原型链开始讲起,如果你想知道构造函数的实例的原型,原型的原型,原型的原型的原型是什么,就来看看这篇文章吧. 构造函数创建对象 我们先使用构造函数创建一个对 ...
- 关于javascript的原型和原型链,看我就够了(一)
关于js的原型和原型链,有人觉得这是很头疼的一块知识点,其实不然,它很基础,不信,往下看 要了解原型和原型链,我们得先从对象说起 创建对象 创建对象的三种方式: 对象直接量 通过对象直接量创建对象,这 ...
- 【进阶5-1期】重新认识构造函数、原型和原型链
引言 前端进阶系列已经到第 5 期啦,本期正式开始原型 Prototype 系列. 本篇文章重点介绍构造函数.原型和原型链相关知识,如果你还不知道 Symbol 是不是构造函数.constructor ...
- 【前端基础】盘根错节的寄生世界之原型和原型链
前言 原型链虽然概念上比较简单,用了奇怪的姿势模拟了继承的功能性,但是在整个Javascript的世界里面,它的的关系错综复杂,很容易被它们之间的关系绕进去 __ proto __ ,[[protot ...
- JavaScript高级day02-AM【函数的prototype、显式原型与隐式原型、原型链】
笔记.视频.源码:JavaScript(基础.高级)笔记汇总表[尚硅谷JavaScript全套教程完整版] 目 录 P15 15.尚硅谷_JS高级_函数的prototype 15:04 1. 函数 ...
- JS中的prototype、__proto__与constructor,原型和原型链
理解原型的几个关键点: 1.所有的引用类型(数组.函数.对象)可以自由扩展属性(除null以外); 2.所有的引用类型(对象)都有一个'_ _ proto_ _'属性(也叫隐式原型,它是一个普通的对象 ...
最新文章
- 2006年下半年 网络工程师 上下午试卷【附带答案】
- VC 2.5 与 ESX 3.0.1 之间存在接口问题
- aspx 与 ashx cs
- Python 技术篇-在cmd命令提示行里模拟动态下载进度条实例演示,cmd清除日志、打印动态内容方法
- 数学国里有座天才云集的“疯人院”
- 楼梯计算机公式,各种楼梯面积的计算公式汇总
- 神经网络其实并不需要那么深!普林斯顿大学英特尔提出ParNet,12层的网络就能达到80%以上的准确率!...
- lxcfs容器隔离技术实现原理分析之loadavg、cpuonline
- vue 多个回调_Vue 进阶面试必问,异步更新机制和 nextTick 原理
- 在虚拟机下安装Linux
- KDE桌面没有wifi的解决方案
- C++ std::set operator <= find失效 erase失效 解决方案
- 121 Python程序中的线程操作-线程定时器
- Momentum动量法
- mi5x的Android的版本,小米5XMIUI11最新稳定版刷机包(最新系统完整固件升级吧安卓8.0)...
- 如何批量保存网页照片
- react-custom-scrollbars滚动组件
- Python 爬虫监控女神的QQ空间新的说说,实现秒赞,并发送说说内容到你的邮箱
- 微信APP退款功能开发
- shell 分割文本_shell教程(2):积木游戏之认识积木--重要的系统命令
热门文章
- java 图片去除黑边_根据 Map 上的变量绘制彩色和形状的点时,保持符号的黑色边框(geom_point)...
- php超强后门在任意位置创建文件,php大马:.user.ini文件构成的超强PHP后门
- 硬币问题——固定终点的最长路和最短路
- Ubuntu镜像下载地址
- LeetCode 454. 四数相加 II 思考分析
- 各抓包软件的之间差异_系统软件和应用程序软件之间的差异
- 使用OpenCV python模块读取图像并将其另存为灰度系统
- stl vector 函数_vector :: push_back()函数,以及C ++ STL中的示例
- 线性结构节点类型(三)
- vs 2019编写汇编并运行调试