要弄懂原型链,首先应先明白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)的更多相关文章

  1. Js 原型和原型链

    Js中通过原型和原型链实现了继承 Js对象属性的访问,首先会查找自身是否拥有这个属性 如果查到,则返回属性值,如果找不到,就会遍历原型链,一层一层的查找,如果找到就会返回属性值 直到遍历完Object ...

  2. 【repost】JS原型与原型链终极详解

    一. 普通对象与函数对象  JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...

  3. JS原型与原型链终极详解

    一. 普通对象与函数对象  JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...

  4. JS原型与原型链终极详解(转)

    JavaScript原型及原型链详解 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object,Function 是JS自带的函数对象. ...

  5. 总结一下js的原型和原型链

    最近学习了js的面向对象编程,原型和原型链这块是个难点,理解的不是很透彻,这里搜集了一些这方面的资料,以备复习所用 一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一 ...

  6. JS原型和原型链

        1 var decimalDigits = 2, 2 tax = 5; 3 4 function add(x, y) { 5 return x + y; 6 } 7 8 function su ...

  7. 第20篇 js高级知识---深入原型链

    前面把js作用域和词法分析都说了下,今天把原型链说下,写这个文章费了点时间,因为这个东西有点抽象,想用语言表达出来不是很容易,我想写的文章不是简单的是官方的API的copy,而是对自己的知识探索和总结 ...

  8. 深入JS原型与原型链

    要了解原型和原型链,首先要理解普通对象和函数对象. 一.普通对象和函数对象的区别 在Javascript的世界里,全都是对象,而对象之间也是存在区别,我们首先区分一下普通对象和函数对象,如下代码: f ...

  9. JS 原型与原型链

    图解: 一.普通对象 跟 函数对象 JavaScript 中,一切皆对象.但对象也有区别,分为 普通对象 跟 函数对象,Object 和 Function 是 JavaScript 自带的函数对象. ...

  10. js之原型,原型链

    1.原型是什么?    在构造函数创建出来的时候,系统会默认的创建并关联一个对象,这个对象就是原型,原型对象默认是空对象    默认的原型对象中会有一个属性constructor指向该构造函数  原型 ...

随机推荐

  1. Python + opencv 实现图片文字的分割

    实现步骤: 1.通过水平投影对图形进行水平分割,获取每一行的图像: 2.通过垂直投影对分割的每一行图像进行垂直分割,最终确定每一个字符的坐标位置,分割出每一个字符: 先简单介绍一下投影法:分别在水平和 ...

  2. [apue] 使用文件记录锁无法实现父子进程交互执行同步

    父子进程间交互执行是指用一种同步原语,实现父进程和子进程在某一时刻只有一个进程执行,之后由另外一个进程执行,用一段代码举例如下: SYNC_INIT(); , counter=; pid_t pid ...

  3. springboot + mybatis + mycat整合

    1.mycat服务 搭建mycat服务并启动,windows安装参照. 系列文章: [Mycat 简介] [Mycat 配置文件server.xml] [Mycat 配置文件schema.xml] [ ...

  4. windows下配置多个tomcat步骤

    步骤如下: 1.使用压缩版的tomcat不能使用安装版的.2.第一个tomcat的配置不变.3.增加环境变量CATALINA_HOME2,值为新的tomcat的地址:增加环境变量CATALINA_BA ...

  5. Angular 文件上传、下载

    1. 文件上传 本地可同时选择多个文件 将本地所选择的文件列出来 单个文件上传至服务器: 删除本地选择的文件 样式使用了bootstrap的样式 1. html - file.component.ht ...

  6. ping通谷歌后发送QQ邮件通知

    前言   国庆期间,据说是为了防止有人在重大节日发表不正当言论,很多可以kxsw的ip都被封了,可是什么时候才会解封呢,不能没事就去ping一下吧,所以我写了个定时任务,定时ping谷歌服务器,如果p ...

  7. Kafka 学习笔记之 Topic日志清理

    Topic日志清理 server.properties: log.cleanup.policy=delete (默认) 1. 按时间维度进行Kafka日志清理 log.retention.hours= ...

  8. Web开发小贴士 -- 全面了解Cookie

    一.Cookie的出现 浏览器和服务器之间的通信少不了HTTP协议,但是因为HTTP协议是无状态的,所以服务器并不知道上一次浏览器做了什么样的操作,这样严重阻碍了交互式Web应用程序的实现. 针对上述 ...

  9. 手把手教你吧Python应用到实际开发 不再空谈悟法☝☝☝

    手把手教你吧Python应用到实际开发 不再空谈悟法☝☝☝ 想用python做机器学习吗,是不是在为从哪开始挠头?这里我假定你是新手,这篇文章里咱们一起用Python完成第一个机器学习项目.我会手把手 ...

  10. 计算机网络知识点总结2:IP协议(IPV4)

    一.Internet网络是一种数据报网络(另一种是虚电路网络,用于ATM等),主要功能是路由和转发. 二.IP数据报(分组)格式(IPV4版本) 首部 描述 版本号(4bit) 描述IP协议的版本号, ...