javaScript之深度理解原型链
经过多次的翻阅书籍终于对原型链在实际代码中的应用有了新的认识,但是不知道是否有错误的地方,还请大神多多指教。
构造函数、原型和实例的关系:每个构造函数都有一个原型对象funName.prototype,原型对象有一个指向构造函数的内部指针constructor,实例对象包含一个指向原型对象的内部指针__proto__(保证了实例可以访问构造函数原型内部所有的)。
(1) 万物皆对象,函数也是对象。函数(function)是对象,函数的原型(function.prototype)也是对象。它们(函数和对象)具有对象的共同特点。即对象都有_proto_属性(隐式原型),它指向构造函数的原型对象。保证了实例可以访问构造函数原型中所有的方法和属性。
(2) 函数(function)除了_proto_属性外,还有prototype属性。这个属性是一个指针,指向一个该构造函数的原型对象,该对象包含所有可以共享的属性和方法。即new Object().__proto__ ===Object.prototype为true。
实例1:原型模式创建对象
代码:
function Person(){};
var p = new Person();
console.log(p.__proto__ == Person.prototype);//true
//实例对象的_proto__指向其构造函数的原型对象。 console.log(Person.prototype.constructor == Person);//true
//原型对象的constructor指向构造函数 console.log(Person.__proto__ == Function.prototype);//true
// 构造函数的__proto__指向其构造函数Function的原型对象,即Function.prototype console.log(Person.prototype.__proto__== Object.prototype);//true
//原型对象的__proto__指向其构造函数Object的原型对象,即Object.prototype
实例2:原型链继承
var Person = function(){};
var Child = function(){};
Child.prototype = new Person();
var pp = new Child();
console.log(pp.__proto__ == Child.prototype); // true
//实例对象的__proto__ 指向构造函数原型对象 console.log(Child.prototype.__proto__ == Person.prototype);//true
// 子构造函数原型对象的__proto__指向父类的原型对象 console.log(pp.__proto__.__proto__ == Person.prototype);//true
// 所以子实例对象的__proto__.__proto__ 指向父原型对象 console.log(Child.__proto__ == Function.prototype);//true
//子构造函数的proto指向Function的原型对象(见第二行代码) console.log(Person.__proto__ == Function.prototype);//true
//父构造函数的__proto__指向Function的原型对象(见第一行代码) console.log(Person.prototype.__proto__ == Object.prototype );//true
//父原型对象的__proto__指向其Object的原型对象 console.log(Person.prototype.constructor == Person );//true
//父原型对象的constructor 指向 父构造函数 console.log(Child.prototype.constructor == Person); // true
//子原型对象的conmstructor指向父构造函数(见第三行代码)
综上所述,只要熟记函数和对象的__proto__属性指向其构造函数原型对象,函数的prototype也指向构造函数的原型对象,原型对象有一个指回构造函数的指针constructor。
javaScript之深度理解原型链的更多相关文章
- JavaScript之继承(原型链)
JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...
- javascript中继承(一)-----原型链继承的个人理解
[寒暄]好久没有更新博客了,说来话长,因为我下定决心要从一个后台程序员转为Front End,其间走过了一段漫长而艰辛的时光,今天跟大家分享下自己对javascript中原型链继承的理解. 总的说来, ...
- javascript 重难点(原型链 this) 理解总有一个过程,不要急,循序渐进!
开始补充: 1. 将函数定义作为对象的属性,称之为对象方法.2. this的指向是由它所在函数调用的上下文决定的(语境),而不是由它所在函数定义的上下文决定的.3. 因为当一个函数作为函数而不是方法来 ...
- JavaScript高级内容:原型链、继承、执行上下文、作用域链、闭包
了解这些问题,我先一步步来看,先从基础说起,然后引出这些概念. 本文只用实例验证结果,并做简要说明,给大家增加些印象,因为单独一项拿出来都需要大篇幅讲解. 1.值类型 & 引用类型 funct ...
- JavaScript 随笔2 面向对象 原型链 继承
第六章 面向对象的程序设计 1.创建对象的几种方式 A)工厂模式 function CreatObj(name,sex,age){ this.name=name; this.sex=sex; this ...
- javascript 创建对象及对象原型链属性介绍
我们知道javascript里定义一个普通对象的方法,如: let obj = {}; obj.num = 1; obj.string = 'string'; obj.func = function( ...
- Javascript之继承(原型链方式)
1.原型链 原型链是JavaScript中继承的主要方法. 每个构造函数都拥有一个原型对象,原型对象都包含一个指向构造函数的指针(constructor),实例都包含一个指向原型对象的内部指针(__p ...
- javascript精髓篇之原型链维护和继承.
一.两个原型 很多人都知道javascript是原型继承,每个构造函数都有一个prototype成员,通过它就可以把javascript的继承演义的美轮美奂了. 其实啊,光靠这一个属性是无法完成jav ...
- javascript 面向对象 new 关键字 原型链 构造函数
JavaScript面向对象JavaScript 语言使用构造函数(constructor)作为对象的模板.所谓"构造函数",就是专门用来生成实例对象的函数.它就是对象的模板,描述 ...
随机推荐
- Python socket TCPServer Demo
#coding:utf-8 from SocketServer import TCPServer,BaseRequestHandler import traceback class MyBaseReq ...
- 第1条:确认自己所用的Python版本
很多电脑都预装了多个版本的标准CPython运行时环境,然而,在命令行中输入默认的python命令之后,究竟会执行哪一个版本无法肯定. python通常是python2.7的别名,但也有可能是pyth ...
- 小程序getApp() 被删除坑
在一个非page的js文件内使用getApp,当前台切到后台的时候,定义的var app = getApp()被删除了 如:新建一个app-libs.js start: function() { va ...
- yii 资料
https://github.com/forecho/awesome-yii2 会随时更新 链接:http://pan.baidu.com/s/1mgCKtUK 密码:t6t1 与<YII框架& ...
- 【Flask】下载多个文件
使用zipfile模块可以将多个文件打包成zip文件进行下载,但是常规的操作方式会在服务器磁盘上生成一个zip文件占用磁盘空间. 后引入BytesIO将文件写入到内存中然后下载: def dl_pla ...
- thinkphp 的 Action 控制器中的系统常量总结
THINK_PATH // ThinkPHP系统目录 APP_PATH // 当前项目目录 APP_NAME // 当前项目名称 CONTROLLER_NAME // 当前控制器名称 MODULE_N ...
- Nginx/Apache下如何禁止指定目录运行PHP脚本
下面和大家一起分享下如何在Apache和Nginx禁止上传目录里PHP的执行权限. Apache下禁止指定目录运行PHP脚本 在虚拟主机配置文件中增加php_flag engine off指令即可,配 ...
- 【海量之道】海量之道之SET模型
本文介绍了set模型. 一 提供海量服务时面对的场景 场景1:如何令黄村机房的TWS机器访问黄村机房的APP服务,避免TWS跨机房调用永丰机房的APP机器? 场景2:DB和Redis如何实现快慢分离, ...
- HTML5调用百度地图API进行地理定位实例
自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图AP ...
- python3反射解析
python反射解析 一. 简介 python中的反射功能是由以下四个内置函数提供:hasattr.getattr.setattr.delattr,改四个函数分别用于对对象内部执行:检查是否含有某 ...