值得收藏的js原型详解
从虚无到Object
起初,地是空虚混沌,渊面黑暗;这时候一切还是null
神说,要有原型,于是就有了prototype
原型从凭空产生,于是需要一个指向于null的特征,人们把这种特征叫做隐式原型,即__proto__,其实也就一种指向,表达的是自己从何而来,也就是:Object.prototype.__proto__ === null
“妖孽还不现出原型”
对,原型一般不显露,显露的一般都是一个对象,所以才会有“对象的原型”一说,就好像每个妖精都有自己的原型一样。
Object与原型的关系
Object通过prototype找到原型,原型通过constructor找到Object,也就是:Object.prototype.constructor === Object
构造函数的由来
函数共有的特点
constructor的意思是构造器,而此时的Object还不能构造任何东西,因此Object需要变成能构造对象的函数,这样的函数我们称之为构造函数;而这样的函数不会凭空产生,它首先得要是个函数,才能进行构造,也就是说会有条隐式原型指向Function.prototype,表示它是个函数;
同样说明:只要是函数,就有一条__proto__指向Function.prototype,包括Function自己;也就是:Function.__proto__===Function.prototype
一切的起源Object.prototype
除了Object.prototype是从null衍生而来,那其他原型呢?要知道,在Object世界中没有人是凭空产生的,Object.prototype除开;
可以看到所有构造函数的原型都是直接或间接来着Object.prototype,而所有系统构造函数的原型都直接来着于Object.prototype;
众所周知,js在找一个对象里面的属性的时候,如果在该对象找不到,就会去该对象的__proto__里面找,如果__proto__里面找不到,就会去对象的__proto__.__proto__里面找,直到找到null为止;
所以,换句话说,这里的构造函数都直接或间接的继承了Object.prototype的属性和方法,在类中,这些都相当于Object.prototype的子孙类,所以,Object.prototype才是一切的起源;
实例化
new做了啥?
实例化通常是指用类创建对象的过程,而在js中实例化有三种常见方法:
工厂模式
function createObj() {
let obj= new Object();
obj.name= "小米";
obj.age= 22;
return obj;
}
let obj = createObj();
构造函数
function CreateObj(name, age) {
this.name= name;
this.age= age;
}
let obj = new CreateObj("小米", 22);
原型模式
function CreateObj() {};
CreateObj.prototype= {
name: "小米",
age: 22
};
let obj = new CreateObj();
这些实例化的方法无疑都用到了new,那new究竟在做了什么呢?
其实new只做了三件很简单的事
- 创建一个空对象
var obj = Object.create(null); - 让这个对象继承类的原型
obj.__proto__ = CreateObj.prototype; - CreateObj构造函数的this指针替换成obj,然后再调用CreateObj函数
CreateObj.call(obj);
现在第一步和第二是可以合并在一起的;var obj = Object.create(CreateObj);
如果第三步不是很清楚了,可以去我的另外一篇博客回顾回顾哦!通道===>>>详解js的bind、call、apply
小结
- 只要是
函数,就有一条__proto__指向Function.prototype,包括Function构造函数; - 除了Object.prototype从null而来,就没有其他对象凭空产生了,绝对会有一条__proto__表明该对象的起源;
值得收藏的js原型详解的更多相关文章
- js对象详解(JavaScript对象深度剖析,深度理解js对象)
js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...
- Node.js npm 详解
一.npm简介 安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...
- Vue.js项目详解
还是以Blog项目来讲解,最近我本人利用闲暇时间,以博客作为参考学习一些新的技术并尝试之前没有尝试过的思路来玩玩. 技术看似枯燥,但是带有一个目的来学,你会发现还是蛮有趣的. 主要实践的就是前后端分离 ...
- JS 面向对象详解
面向对象详解1 OO1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- 开胃小菜——impress.js代码详解
README 友情提醒,下面有大量代码,由于网页上代码显示都是同一个颜色,所以推荐大家复制到自己的代码编辑器中看. 今天闲来无事,研究了一番impress.js的源码.由于之前研究过jQuery,看i ...
- jquery图片切换插件jquery.cycle.js参数详解
转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...
- 第三天:JS事件详解-事件流
学习来源: F:\新建文件夹 (2)\HTML5开发\HTML5开发\04.JavaScript基础\6.JavaScript事件详解 学习内容: 1)基础概念 2)举例说明: 代码如上,如果用事件 ...
- 值得珍藏的HTTP协议详解
转自:http://www.cnblogs.com/li0803/archive/2008/11/03/1324746.html 引言 HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式 ...
- 【JavaScript】js中的构造函数,和构造函数的实例中的原型详解
1. 构造函数作为一个对象,他也有他的原型属性,即.prototype:该属性指向的原型对象是Object. 2. 而构造函数产生的实例却没有.prototype属性,但是作为一个对象,该实例却仍然拥 ...
随机推荐
- 7.关于一些dom&&获取元素
1. 测试点击的是否是span 标签 <span onClick={this.select.bind(this)}>点击</span> select( e ){ cons ...
- linux CVE-2019-13272 本地特权漏洞
漏洞描述 在5.1.17之前的Linux内核中,kernel / ptrace.c中的ptrace_link错误地处理了想要创建ptrace关系的进程的凭据记录,这允许本地用户通过利用父子的某些方案来 ...
- python web的进化历程
对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 阶段1 socket服务端和客户端都自己编写 实现访问8080端口,返回一个'hello wo ...
- 电脑Win10晚上让它更新,为何第二天开机蓝屏?
大家好,欢迎来到<电脑讲堂>,我是主持人高帅帅.PS:没错,就是那个人见人爱,花见花开的高帅帅. 话说,在一个月黑风高的夜晚,我晚上离开实验室,离开前看到了电脑的系统更新提醒,就顺手点了一 ...
- 数据挖掘入门系列教程(十点五)之DNN介绍及公式推导
深度神经网络(DNN,Deep Neural Networks)简介 首先让我们先回想起在之前博客(数据挖掘入门系列教程(七点五)之神经网络介绍)中介绍的神经网络:为了解决M-P模型中无法处理XOR等 ...
- 前端基础-HTML(1)
1.浏览器: 1.1 浏览器内核: 渲染引擎和JS引擎 渲染引擎:负责页面内容的在(html,xml,图像等).整理讯息(加入css等),以及计算网页的显示方式,然后输出至显示器后者打印机 JS引擎: ...
- tp5命名空间补充
1.非限定名称访问方式: 直接访问当前的空间和元素 2.限定名称命名空间: 路径\方法(); 相当于相对路径 以当前的命名空间为起点,去找路径上的方法 3.完全限定名称访问方式:\路径\方法(); ...
- Selenium常见报错问题(3)- 解决和分析NoSuchElementException
如果你在跑selenium脚本时,需要某些异常不知道怎么解决时,可以看看这一系列的文章,看看有没有你需要的答案 https://www.cnblogs.com/poloyy/category/1749 ...
- 20199310《Linux内核原理与分析》第十二周作业
1.问题描述 2014年9月24日,Bash中发现了一个严重漏洞shellshock,该漏洞可用于许多系统,并且既可以远程也可以在本地触发.在本实验中,通过学习重现攻击该漏洞,加深对于ShellSho ...
- 二、Vue基础语法
六:Vue的v-bind指令作用:绑定标签上的所有属性其简写 ":" 6.1: 例如:<p v-bind:id="test">Hello wo ...