JavaScript面向对象的理解
JavaScript面向对象的理解 笔记链接: http://pan.baidu.com/s/1c0hivuS
1:JavaScript 中分两种对象,函数对象和普通对象
new Function() 创建的对象都是函数对象、其他的都是普通对象。
函数对象 例:
function f1(){};
var f2 = function(){};
var f3 = new Function('str','console.log(str)');
普通对象 例:
var o3 = new f1();
var o1 = {};
var o2 =new Object();
2:原型对象
JavaScript中,定义一个普通对象或者函数对象时候,对象中都会包含一些预定义的属性。其中
函数对象有个prototype属性、它就是原型对象。
普通对象没有prototype、但有__proto__属性、(当然函数对象也有这个属性)参考下文的图解
原型对象就是一个普通对象 、是Object的一个实例
特殊的:
Function的prototype --> Function.prototype
Object的prototype --> Object.prototype
Function.prototype 很特殊,
1:他不是一个普通对象,而是函数对象
2:因为函数对象是有一个prototype属性的,而这个对象没有
Object.prototype 是一个普通对象
3:原型链
JavaScript中,在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做__proto__的内置属性 用于指向创建自己的函数对象的原型对象(prototype)如下
__proto__ 指向创建自己的函数对象的原型对象prototype
特殊的
Function.__proto__ == Function.prototype
Object.__proto__ == Function.prototype
Function.prototype.__proto__ == Object.prototype
Object.prototype.__proto__ == null
理解:
自定义的函数对象.__proto__ == Function.prototype
自定义的函数对象.prototype.__proto__ == Object.prototype
自定义的函数对象 是由 new Function 创建,
那么自定义的函数对象.__proto_ 应该指向 Function.prototype 对象
自定义的函数对象.prototype 是一个原型对象 、就是一个Object的一个实例
那么自定义的函数对象.prototype.__proto__ 应该指向 Object.prototype
例:
console.log(kongxh.__proto__ === person.prototype) //true
同样,person.prototype对象也有__proto__属性,它指向创建它的函数对象(Object)的prototype
console.log(person.prototype.__proto__ === Object.prototype) //true
继续,Object.prototype对象也有__proto__属性,但它比较特殊,为null
console.log(Object.prototype.__proto__) //null
我们把这个有__proto__串起来的直到Object.prototype.__proto__为null的链叫做原型链。
如图:
4:constructor
原型对象prototype中都有个预定义的constructor属性,用来引用它的函数对象。这是一种循环引用
比如:
自定义的函数对象.prototype.constructor === 自定义的函数对象 //true
Function.prototype.constructor === Function //true
Object.prototype.constructor === Object //true
有两点需要注意:
(1)如何查找一个对象的constructor,就是在该对象的原型链上寻找碰到的第一个constructor属性所指向的对象 【原型链的形成是真正是靠__proto__ 而非prototype)】
(2)注意Object.constructor===Function;
ps:
原型对象是用来做共享 、用于继承
原型和原型链是JS实现继承的一种模型。
原型链的形成是真正是靠__proto__ 而非prototype
instanceof 可以查看对象是那种类型,类型包括当前对象的类型及其原型对象的类型
比如
instanceof(kongxh) == Person //true
instanceof(kongxh) == Object //true
下图为一个自定义对象创建的对象之间引用图:
var Person = function(){};
var kongxh = new Person();

JavaScript面向对象的理解的更多相关文章
- javascript javascript面向对象的理解及简单的示例
javascript面向对象的理解及简单的示例 零.本节重点: 1.封装: 2.继承: 壹.下面理解: 一. javascript面向对象概念: 为了说明 JavaScript 是一门彻底的面向对象的 ...
- javascript面向对象的理解(一)
第一次在园子发文: 关于js面向对象的理解: 工厂方式是什么?构造函数是什么?原形链?对象的引用? 1.对象是什么? 在js接触的比较多的就是对象了,比如: var arr = []; arr.num ...
- javascript面向对象个人理解
1. javascript面向对象特性:抽象性,封装性,继承性: 2. js中的对象:键值对的集合:比如说{key:value} 3.抽象性:用一个对象描述一个数据,需要抽取这个对象的核心数据:两个必 ...
- JavaScript 面向对象编程 · 理解对象
前言: 在我们深入 面向对象编程之前 ,让我们先理解一下Javascript的 对象(Object),我们可以把ECMAScript对象想象成散列表,其值无非就是一组名值对,其中值可以是数据 ...
- JavaScript面向对象深入理解原型
原型模式 function Person(){ } Person.prototype.name="Ewarm"; Person.prototype.age="29&quo ...
- JavaScript 面向对象开发知识基础总结
JavaScript 面向对象开发知识基础总结 最近看了两本书,书中有些内容对自己还是很新的,有些内容是之前自己理解不够深的,所以拿出来总结一下,这两本书的名字如下: JavaScript 面向对象精 ...
- 聚焦JavaScript面向对象的思想
面向对象是一种软件开发方法,是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物.随着时代的发展,计算机被用于解决越来越复杂的问题.一切事物皆对象,通过面向对象的方式,将现实世界的 ...
- 03.JavaScript 面向对象精要--理解对象
JavaScript 面向对象精要--理解对象 尽管JavaScript里有大量内建引用类型,很可能你还是会频繁的创建自己的对象.JavaScript中的对象是动态的. 一.定义属性 当一个属性第1次 ...
- 深入理解Javascript面向对象编程
深入理解Javascript面向对象编程 阅读目录 一:理解构造函数原型(prototype)机制 二:理解原型域链的概念 三:理解原型继承机制 四:理解使用类继承(继承的更好的方案) 五:建议使用封 ...
随机推荐
- SharePoint JavaScript 客户端对象使用视频教程
本次视频教程是为大家介绍如何使用SharePoint JavaScript客户端对象,包括对于站点.列表.文档库.列表项.文件夹.文件和附件等基本对象的操作,同时,为大家举几个简单的应用的例子,让大家 ...
- js,jq获取元素位置属性及兼容性写法
网页被卷起来的高度/宽度 document.documentElement.scrolltop //火狐 和 其他浏览器 document.body.scrolltop //ie,谷歌浏览器和没有 ...
- C++ Primer 5 CH6 函数
6.1 函数基础 函数包括:返回类型.函数名字.形参.函数体. 通过 "调用运算符"(一对圆括号)来执行函数,它作用于一个表达式,该表达式是函数或者指向函数的指针. 函数调用完成两 ...
- 浅谈Java的开放封闭原则
写在前面 最近, 接手了一个新业务,系统的架构可圈可点.但有些地方让人望而生畏,有些代码臃肿难以维护,让人不敢恭维.于是,结合了Java的开放封闭原则,对其中一部分代码进行了重构优化. 先来看下以前系 ...
- Maven 自定义 archetype
最近在公司经常要写一些 storm-job 工程的骨架(archetype)非常相似,为了能够将大家的工程结构固定下来以及节约建工程的成本,所以给组内自定义了maven-archetype,中途遇到了 ...
- Struts2的类型转换(上)
传统的类型转换.(略) Struts2中提供了内置的基本的类型转换器,可以实现基本类型的自动转换,包括: Integer, Float, Double, Decimal Date and Dateti ...
- 【转】AS3画板工具类,可直接套用
原文链接:http://bbs.9ria.com/thread-212711-1-16.html 今天项目需求做一个画板,要有橡皮擦.自己懒不想写,在网上搜了半天都是习作,没有拿来就能用的又不爱看.只 ...
- 微信小程序评分功能
很多做过电商项目的朋友会经常用到评分的功能,我这里正好写了一个例子,发出来分享一下: 我写的是5分满分制的,首先,准备3个图片, ,像这样的,分别代表分数为0,0.5,1 时的状态, 效果图:(以3. ...
- Wpf学习之路……
Wpf学习之路-- Wpf是 .net中一门做winform的技术,和传统的winform的区别在于: 1. 原来的winform就是拖控件,而wpf的控件都死自己拿标记语言(xaml ...
- 【Android】XML文件的解析
1.首先我们可以在res包路径下创建一个raw包,然后在raw下创建一个email.xml 文件,并修改其内容如下: <?xml version="1.0" encoding ...