js奥义:原型与原型链(1)
要弄懂原型链,首先应先明白prototype原型对象、__proto__、对象三者之间的关系。
引入构造函数的相关定义:
构造函数是一种比较特殊的函数,用于批量实例化对象。通俗一点说,构造函数是用于生成对象的模板。
由于工厂模式在实例化对象时会存在同一功能代码在内存中开辟不同内存空间从而造成内存空间浪费的问题,更多的人选择使用构造函数来实例化对象,es6中引进的class关键字正是基于构造函数的思想
构造函数的本质上是将对象中一些公共的方法和属性 抽取出来,然后将这个函数封装成可复用的构造函数.
构造函数的特点(与工厂函数相比较):
a. 函数名首字母大写;
b. 函数体内没有关键字new,在实例化一个对象时会使用关键字new;
c. 构造函数体内的this指代当前实例化对象;
d. 函数体内没有关键字return。
function Fn() {
this.n = 20
}
Fn.prototype.say= function() {
console.log(this.n)
}
var deb = new Fn()
构造函数的new关键字在实例化对象时会做以下四件事:
a.现在内存中开辟一块内存空间(new obj);
b.让构造函数体内的this指向这个对象 (因而,this指代当前对象);
c.将构造函数体内的属性和方法赋值给这个这个对象;
d.返回这个对象 (因而,构造函数体内没有return关键字)
为了区别对待,以下将构造函数称为父类,将实例化对象称为子类。
一:原型
1.定义
每一个函数身上都有一个prototype(原型),由于这个prototype的值是一个对象类型,因而又叫做原型对象,ptototype属性是函数独有的属性!
2.原型的作用
原型对象的作用通常用来共享父类的方法,由于方法是函数,本质上也是一个对象,而对象的内存地址保存在堆空间里,如同工厂模式一般,多个内存空间存放相同的代码,会造成大量空间被占用,因而将公有的方法添加在父类的prototype上,也就是写入了同一对象上,调用的时候也就避免了多个空间存放同一代码的错误示范,而由于父类的属性的值是基本类型,所占内存较少,所以我们往往将其添加到父类函数体的内部。
function Fn() {
this.n = 20
}
Fn.prototype.sing = function() {
console.log(this.n)
}
var deb = new Fn()
var deb2 = new Fn()
console.log(deb.sing === deb2.sing) //true
二:__proto__
与函数的prototype属性不同,每一个obj的对象都有一个__ptoto__属性,这个__proto__属性隐式的指向了这个子类的的构造函数的prototype属性!但是这个__proto__属性是不可见的,这也就是为什么将其称作是隐式的,不过好在浏览器的支持下,它被定义为__proto__
如果看到这里,希望你再好好思考一下 ”万物皆对象“这句话的含义
从父类的角度看,子类的_proto_属性隐式指向了它的父类的prototype对象;从子类的角度看,子类自身的__proto__属性指向了它的父类的prototype属性
假如我们对比父类的prototype与子类的__proto__属性:
console.log(Fn.prototype === deb.__proto__)//true
理解了这一点,就可以明白为什么构造函数添加在其原型对象上的方法,实例化对象可以共享使用了:因为构造函数的prototype属性指向的 与 实例化对象的__proto__属性指向的 是同一个对象,也就是父类的prototype对象!
这样,就具备了深入理解原型链的条件。
js奥义:原型与原型链(1)的更多相关文章
- Js 原型和原型链
Js中通过原型和原型链实现了继承 Js对象属性的访问,首先会查找自身是否拥有这个属性 如果查到,则返回属性值,如果找不到,就会遍历原型链,一层一层的查找,如果找到就会返回属性值 直到遍历完Object ...
- 【repost】JS原型与原型链终极详解
一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...
- JS原型与原型链终极详解
一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...
- JS原型与原型链终极详解(转)
JavaScript原型及原型链详解 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object,Function 是JS自带的函数对象. ...
- 总结一下js的原型和原型链
最近学习了js的面向对象编程,原型和原型链这块是个难点,理解的不是很透彻,这里搜集了一些这方面的资料,以备复习所用 一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一 ...
- JS原型和原型链
1 var decimalDigits = 2, 2 tax = 5; 3 4 function add(x, y) { 5 return x + y; 6 } 7 8 function su ...
- 第20篇 js高级知识---深入原型链
前面把js作用域和词法分析都说了下,今天把原型链说下,写这个文章费了点时间,因为这个东西有点抽象,想用语言表达出来不是很容易,我想写的文章不是简单的是官方的API的copy,而是对自己的知识探索和总结 ...
- 深入JS原型与原型链
要了解原型和原型链,首先要理解普通对象和函数对象. 一.普通对象和函数对象的区别 在Javascript的世界里,全都是对象,而对象之间也是存在区别,我们首先区分一下普通对象和函数对象,如下代码: f ...
- JS 原型与原型链
图解: 一.普通对象 跟 函数对象 JavaScript 中,一切皆对象.但对象也有区别,分为 普通对象 跟 函数对象,Object 和 Function 是 JavaScript 自带的函数对象. ...
- js之原型,原型链
1.原型是什么? 在构造函数创建出来的时候,系统会默认的创建并关联一个对象,这个对象就是原型,原型对象默认是空对象 默认的原型对象中会有一个属性constructor指向该构造函数 原型 ...
随机推荐
- 洗牌Shuffle'm Up POJ-3087 模拟
题目链接:Shuffle'm Up 题目大意 模拟纸牌的洗牌过程,已知两个牌数相等的牌堆.求解经过多少次洗牌的过程,使牌的顺序与目标顺序相同. 思路 直接模拟,主要是字符串的操作.问题是,如何判断出不 ...
- 机器学习之SVM调参实例
一.任务 这次我们将了解在机器学习中支持向量机的使用方法以及一些参数的调整.支持向量机的基本原理就是将低维不可分问题转换为高维可分问题,在前面的博客具体介绍过了,这里就不再介绍了. 首先导入相关标准库 ...
- alpha测试和beta测试的区别
alpha测试版,有点相当于内部测试,一般开发人员在场 ,是由用户做测试,但开发人员在场,一般是请用户到开发现场去测试 beta测试版,完全交给用户,由用户做测试,返回测试报告,相当于发行前的一 ...
- Linux 安装CentOS7操作系统
作者:小啊博 QQ:762641008 转载请声明:https://www.cnblogs.com/-bobo 1.安装操作系统 开启虚拟机后会出现以下界面 Install CentOS 7 安装Ce ...
- 国庆佳节第四天,谈谈我月收入增加 4K 的故事
01.起承 在我下定决心改变的这将近 1 年的时间里,遇到了很多很多有故事的人,以及有趣的事.自我的认知改变特别大!尤其是收入,比去年同时期增加了 4K. 4K,可能也就买 100 斤猪肉.但是对于身 ...
- 【Unity与Android】02-在Unity导出的Android工程中接入Google Admob广告
我在上一篇文章 [Unity与Android]01-Unity与Android交互通信的简易实现) 中介绍了Unity与Android通讯的基本方法. 这一篇开始进入应用阶段,这次要介绍的是如何在An ...
- 虚拟机中设置 CentOS 静态 IP
作为开发人员在工作和学习中通过虚拟机使用 Linux 的情况肯定会非常多,但是 Linux 自带的终端使用体验较差,所以绝大多数使用者都会在宿主机上使用第三方 SSH工具(例如 Xshell)进行连接 ...
- iOS渠道分包2种模式之包内注入文件分包
解决问题:商业模式中会存在这样的形式1款app需要不同的运用团队(工会)去分包推广,谁推广的包下载的人数都会在服务器记录,不同渠道的标示唯一来区分. iOS渠道分包模式有两种 一.IDFA模式 IDF ...
- CSS实现带箭头的提示框
我们在很多UI框架中看到带箭头的提示框,感觉挺漂亮,但是之前一直不知道其原理,今天网上找了些资料算是弄清楚原理了: 先上效果图: 原理分析: 上面的箭头有没有觉得很像一个三角形,是的,它就是三角形:只 ...
- CSS隐藏元素 display、visibility、opacity的区别
关于使指定元素无法在视野内看到,有3个方法 display: none; opacity: 0; visibility: hidden; 1.display: none; 该方法会改变页面布局. 元素 ...