体现对象原型分步式写法

//原型分步式写法
//构造函数
function Person(){}
//对象原型
Person.prototype.name = 'Avensatr';
Person.prototype.age = '22';
Person.prototype.job = 'Software Engineer';
Person.prototype.sayName = function(){
console.log(this.name);
}

我问你答?? 打印结果是??

var person = new Person();
//__proto__隐式原型与显式原型Person.prototype
console.log(person.__proto__);
console.log(Person.prototype);
//构造函数(对象原型构造用于构造对象)
console.log(Person.prototype.constructor);
console.log(Person.prototype.constructor === Person);
//构造函数原型
console.log(Person.prototype.constructor.prototype);
//对象原型
console.log(Person.prototype.__proto__);
//构造函数是由function Function(){}创建
console.log(Person.prototype.constructor.__proto__);
console.log(person.__proto__ === Person.prototype);

理清上述(实例与构造原型对象关联关系)打印结果后,见图解如下

完整图解应如下

Person.prototype只是对象指针引用,真正创建对象的是Person.prototype.constructor.prototype 构造函数原型

每个创建一个函数都有prototype属性,该函数prototype属性指向一个该函数创建的对象.即 Person.prototype.constructor.prototype

实例对象之间通过“__proto_隐式原型”与构造函数原型对象“Person.prototype”之间相关联 即person.__proto__ === Person.prototype

instanceof 用于检测对象与实例之间关系

person instanceof  Person 沿着原型链person.__proto__与Person.prototype查找,若两条线能找到同一个引用,即同一个对象,则返回true,否则返回false

    体现对象原型封装的写法

//原型集中写法
function Person(){}
var friends = new Person();//创建一个实例对象
Person.prototype = {
name : "Avensatr",
age : "22",
job : "Software Engineer",
sayName : function(){
console.log(this.name);
}
}

这种面向对象快捷写法 Person.prototype = {} 与上述对象原型分步式写法有所区别;本质体现在原型的重写上

Person.prototype.constrctor 不再指向 function Person(){} 而指向新的function Object() { [native code] }函数

打印结果如下图

   匿名函数自执行封装对象原型方法

function Person(){}
Person.prototype = (function () {
var setName = function (name) {
return name;
},
setAge = function (age) {
return age;
},
setJob = function (job) {
return job;
};
return {
setName : setName,
setAge : setAge,
setJob : setJob
}
})();

匿名函数自执行与体现对象原型封装的写法原理是一样的,这里不再赘述  

作者:Avenstar

出处:http://www.cnblogs.com/zjf-1992/p/6622444.html

关于作者:专注于前端开发

本文版权归作者所有,转载请标明原文链接

【资料参考】

http://www.sxrczx.com/docs/js/2305453.html

JavaScript高级程序设计(第三版)

JavaScript对象原型写法详解的更多相关文章

  1. JavaScript对象原型写法区别

        体现对象原型分步式写法 //原型分步式写法 //构造函数 function Person(){} //对象原型 Person.prototype.name = 'Avensatr'; Pers ...

  2. JavaScript之原型深入详解

    理解原型 原型是一个对象,其他对象可以通过它实现属性继承.任何一个对象都可以成为继承,所有对象在默认的情况下都有一个原型,因为原型本身也是对象,所以每个原型自身又有一个原型.任何一个对象都有一个pro ...

  3. 从mixin到new和prototype:Javascript原型机制详解

    从mixin到new和prototype:Javascript原型机制详解   这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客 继承是为了实现方法的复用 ...

  4. 你不知道的JavaScript--Item15 prototype原型和原型链详解

    用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了, ...

  5. Javascript中prototype属性详解 (存)

    Javascript中prototype属性详解   在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...

  6. Javascript常用的设计模式详解

    Javascript常用的设计模式详解 阅读目录 一:理解工厂模式 二:理解单体模式 三:理解模块模式 四:理解代理模式 五:理解职责链模式 六:命令模式的理解: 七:模板方法模式 八:理解javas ...

  7. JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  8. Javascript 异步加载详解

    Javascript 异步加载详解 本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy ...

  9. 【JavaScript中的this详解】

    前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...

随机推荐

  1. scala的安装及使用

    前提你的集群机器已经安装好jdk1.7.0_79.hadoop-2.7.3: 配置中使用了master01.slave01.slave02.slave03: 文中的所有操作都是在之前的文章http:/ ...

  2. Spark学习(一)

    一.启动Spark 1.standalone模式 方法一: (1)启动主节点 ./sbin/start-master.sh 访问http://127.0.0.1:8080,得到如下页面 注意标记到的链 ...

  3. 金三银四招聘季,这些BAT以及独角兽互联网公司官方招聘网站值得关注。(个人梳理备用:附BAT以及独角兽公司官方招聘网址)

    金三银四是一年当中的招聘最旺盛的时期,即招聘高峰期,在这个期间内有非常多名企巨头公司的放出大量的岗位信息.以博主几年的工作经验来看,在这期间找到称心如意的工作的几率大大提升,对于很多程序员来说,薪水高 ...

  4. double在输出为字符串的几种方法效率测试

    测试结果: double->none 366msdouble->long 161msdouble->long2 188msdouble->format 564msdouble- ...

  5. VirtualBox VM启用3D加速

    默认情况下,是不支持 DX3D的, 我们运行 dxdiag 看到的情况如下: 安装时也提示需要安全模式下才能安装 VirtualBox 必须在Windows安全模式下才能成功安装3D加速驱动。 重启系 ...

  6. 【Web前端】用CSS3实现弹幕

    初版 用css3来实现弹幕确实比较简单,只需要设置动画让弹幕从屏幕右侧移动到屏幕左侧即可,一开始是这样实现的 .danmu { position: fixed; left: %; animation: ...

  7. 课程作业——Python基础之使用turtle库画出红旗

    代码如下: import turtle # 设置画笔和背景颜色 turtle.color('yellow') turtle.bgcolor('red') # 通过偏移量和尺寸大小画星星 def dra ...

  8. Activiti实现流程自由跳转

    import org.activiti.engine.ProcessEngine; import org.activiti.engine.TaskService; import org.activit ...

  9. 【读书笔记】iOS-使用钥匙串保护数据

    一,将应用从设备上删除时,并不会删除其钥匙串项,这使得调试工作困难得多.模拟器有一个Reset Contents and Settings选项,可用于将钥匙串项移除.因此,强烈建议在模拟器上确定Key ...

  10. Landsat数据下载方法小结

    本文转载自:http://malagis.com/landsat-data-download.html 本文介绍下载Landsat数据的方法. Landsat(美国陆地卫星)是遥感应用中常用的卫星数据 ...