体现对象原型分步式写法

//原型分步式写法
//构造函数
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对象原型

    一.MDN上的解释(有点抽象) 基于原型的语言? JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模 ...

  3. 25 JavaScript对象原型&ES5新的对象方法

    JavaScript对象原型 所有JavaScript对象都从原型继承对象和方法 日期对象继承自Date.prototype,数组继承自Array.prototype,对象构造器新建的对象Person ...

  4. 再访JavaScript对象(原型链和闭包)

    一:原型链简介 JavaScript通常被描述为基于原型的语言 (从继承机制的角度)- 为了提供继承,对象(注意:区别于实例)可以拥有一个原型对象,它充当一个模板对象,它继承了方法和属性.对象的原型对 ...

  5. JavaScript对象原型链的学习

    1.构造函数和原型 1.1对象的三种创建方式 字面量方式 var obj = {}; new关键字 var obj = new Object(); 构造函数方式 function Person(nam ...

  6. JavaScript对象 原型

    javascript对象就是一组数据和功能的集合,除原始类型(string.number.boolean.null.undefined)之外,其余都是对象. 可以通过对象直接量(字面量).new.和O ...

  7. JavaScript对象——原型与原型链

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

  8. 理解 JavaScript 对象原型、原型链如何工作、如何向 prototype 属性添加新的方法。

    JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板.从原型继承方法和属性.原型对象也可能拥有原型, ...

  9. 🍓JavaScript 对象原型链继承的弊端 🍓

随机推荐

  1. 关于JavaScript中的escape、encodeURI和encodeURIComponent

    此文内容与关于JavaScript中的编码和解码函数 关联 escape() 方法: 采用ISO Latin字符集对指定的字符串进行编码.所有的空格符.标点符号.特殊字符以及其他非ASCII字符都将被 ...

  2. django源码简析——后台程序入口

    这一年一直在用云笔记,平时记录一些tips或者问题很方便,所以也就不再用博客进行记录,还是想把最近学习到的一些东西和大家作以分享,也能够对自己做一个总结.工作中主要基于django框架,进行项目的开发 ...

  3. Docker网络代理设置

    背景 在一些实验室环境,服务器没有直接连接外网的权限,需要通过网络代理.我们通常会将网络代理直接配置在/etc/environment./etc/profile之类的配置文件中,这对于大部分操作都是可 ...

  4. ZooKeeper的注意事项

    在ZooKeeper中存储的数据是以字节数组的形式存储的,当用Java程序处理数据时要注意. Ephemeral znodes并不会有child znode 只有parent-znode存在,才能创建 ...

  5. iOS 图形编程总结

    iOS实现图形编程可以使用三种API(UIKIT.Core Graphics.OpenGL ES及GLKit). 这些api包含的绘制操作都在一个图形环境中进行绘制.一个图形环境包含绘制参数和所有的绘 ...

  6. [bzoj3196]Tyvj 1730 二逼平衡树——线段树套平衡树

    题目 Description 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作: 1.查询k在区间内的排名 2.查询区间内排名为k的值 3.修改某一位值上的数值 4.查 ...

  7. 大型ERP系统在线体验

    ERP简单说明: AIO7构建了基于SOA三层架构的管理软件平台.客户通过网络即可得到ERP服务,不用安装服务器.不用建立数据中心.不用安装软件.无需专业IT支持,任何上网设备就可以使用高性能.功能集 ...

  8. node环境安装(mac版和windows版)

    WINDOWS版本安装 nvm 是 Mac 下的 node 管理工具,有点类似管理 Ruby 的 rvm,如果是需要管理 Windows 下的 node,官方推荐是使用 nvmw 或 nvm-wind ...

  9. JAVA: List用法

    1.List中可以添加任何对象,包括自己定义的新的类. class Person{.....}上面定义了一个Person类,下面看好如何使用ListPerson p1=new Person();Per ...

  10. 网络信息安全攻防学习平台 上传,解密通关writeup

    上传关 [1]查看源代码,发现JS代码.提交时onclick进行过验证.ctrl+shift+i 打开开发者工具,将conclick修改为 return True,即可以上传上传php文件,拿到KEY ...