一,instanceof:

instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章

[js高手之路]构造函数的基本特性与优缺点

[js高手之路]一步步图解javascript的原型(prototype)对象,原型链

已经分享过了.

         function CreateObj(uName) {
this.userName = uName;
this.showUserName = function () {
return '100';
}
}
CreateObj.prototype.showUserName = function () {
return this.userName;
}
var obj1 = new CreateObj('ghostwu');
var obj2 = new CreateObj('卫庄'); console.log( obj1 instanceof CreateObj ); //true
console.log( obj2 instanceof CreateObj ); //true
console.log( obj1 instanceof Object ); //true
console.log( obj2 instanceof Object ); //true

二、isPrototypeOf:

如果隐式原型__proto__指向调用isPrototypeOf()方法的对象原型( CreateObj ), 那么这个方法就返回true,如:

         var obj1 = new CreateObj('ghostwu');
var obj2 = new CreateObj('卫庄');
console.log( CreateObj.prototype.isPrototypeOf( obj1 ) ); //true
console.log( CreateObj.prototype.isPrototypeOf( obj2 ) ); //true

因为obj1,obj2的隐式原型__proto__指向的都是CreateObj.prototype, 有朋友可能会问CreateObj.prototype上面根本就没有isPrototypeOf这个方法,怎么可以

调用呢?

是的,没错,但是CreateObj.prototype的隐式原型__proto__指向了Object.prototype, 而isPrototypeOf存在Object.prototype上,所以就能够调用

三、Object.getPrototypeOf

获取实例的隐式原型(__proto__)的指向,因为obj1,obj2的__proto__都指向CreateObj.prototype

         var obj1 = new CreateObj('ghostwu');
var obj2 = new CreateObj('卫庄');
console.log( Object.getPrototypeOf( obj1 ) === CreateObj.prototype ); //true
console.log( Object.getPrototypeOf( obj2 ) === CreateObj.prototype ); //true

四,实例访问属性和方法时,遵循就近查找原则

实例先在自己身上查找,有,就停止查找,如果没有,就沿着实例的__proto__继续往上查找,有,就停止查找,如果没有就继续沿着原型链一直往上查找,如果

所有的原型对象上都没有,那就是undefined.

         function CreateObj(uName) {
this.userName = uName;
}
CreateObj.prototype.showUserName = function () {
return this.userName;
}
CreateObj.prototype.age = 22; var obj1 = new CreateObj('ghostwu');
obj1.age = 20;
var obj2 = new CreateObj('卫庄'); console.log( obj1.age ); //20--->来自实例
console.log( obj2.age ); //22--->来自原型对象 delete obj1.age;
console.log( obj1.age ); //22--->来自原型

五,hasOwnProperty

判断属性是实例上的还是原型对象上的,如果是实例上的,返回true, 原型上的返回false

         function CreateObj(uName) {
this.userName = uName;
}
CreateObj.prototype.showUserName = function () {
return this.userName;
}
CreateObj.prototype.age = 22;
var obj1 = new CreateObj('ghostwu');
obj1.age = 20;
var obj2 = new CreateObj('卫庄');
console.log( obj1.age ); //20--->来自实例
console.log( obj1.hasOwnProperty( 'age' ) ); //true
console.log( obj2.age ); //22--->来自原型对象
console.log( obj2.hasOwnProperty( 'age' ) ); //false
delete obj1.age;
console.log( obj1.age ); //22--->来自原型
console.log( obj1.hasOwnProperty( 'age' ) ); //false

六、in操作符

判断属性是否在实例或者原型对象上,只要一个满足条件,返回值都是true

         function CreateObj(uName) {
this.userName = uName;
}
CreateObj.prototype.showUserName = function () {
return this.userName;
}
CreateObj.prototype.age = 22;
var obj1 = new CreateObj('ghostwu');
obj1.age = 20;
console.log( 'age' in obj1 ); //true
var obj2 = new CreateObj('卫庄');
console.log( 'age' in obj2 ); //true
delete obj1.age;
console.log( 'age' in obj1 ); //true
console.log( 'user' in obj1 ); //false
console.log( 'user' in obj2 ); //false

七,结合in和hasOwnProperty的用法,可以封装一个函数判断这个属性是否在原型对象上, 返回值为true:在原型对象上, false:不在原型对象上

         function CreateObj(uName) {
this.userName = uName;
}
CreateObj.prototype.showUserName = function () {
return this.userName;
}
CreateObj.prototype.age = 20;
function hasPrototypeProperty( obj, name ){
return !obj.hasOwnProperty( name ) && ( name in obj );
}
var obj1 = new CreateObj('ghostwu');
var obj2 = new CreateObj('卫庄');
obj1.age = 10;
console.log( hasPrototypeProperty( obj1, 'age' ) ); //false
console.log( hasPrototypeProperty( obj2, 'age' ) ); //true

八、for...in 可以枚举实例和原型对象上的属性和方法,前提是:该属性和方法是可以枚举

          function CreateObj(uName) {
this.userName = uName;
}
CreateObj.prototype.showUserName = function () {
return this.userName;
}
CreateObj.prototype.age = 20;
var obj = new CreateObj( 'ghostwu' ); for( var key in obj ){
console.log( key ); //userName,age,showUserName
}
console.log( Object.prototype );
for( var key in Object.prototype ){
console.log( key );//枚举不了, Object.prototype上的属性和方法默认不可枚举,枚举属性为false
}

[js高手之路]原型对象(prototype)与原型链相关属性与方法详解的更多相关文章

  1. [js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用

    本文主要讲解DOM常用的CURD操作,appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),clo ...

  2. JavaScript的原型对象prototype、原型属性__proto__、原型链和constructor

    先画上一个关系图: 1. 什么是prototype.__proto__.constructor? var arr = new Array; 1. __proto__是原型属性,对象特有的属性,是对象指 ...

  3. 原型对象prototype和原型属性[[Prototype]]

    构造器:可以被 new 运算符调用, Boolean,Number,String,Date,RegExp,Error,Function,Array,Object 都是构造器,他们有各自的实现方式. 比 ...

  4. [js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数

    一.我们从一个简单的构造函数+原型程序开始 var G = function(){}; G.prototype = { length : 5, size : function(){ return th ...

  5. js面向对象之公有、私有、静态属性和方法详解

    现下,javascript大行其道,对于网站开发人员来说,javascript是必需掌据的一门语言,但随着jquery等框架的流行和使用,许多人对于原生javascript缺乏深入的理解,习惯了函数式 ...

  6. [js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法

    canvas是html5中引入的一个新元素,俗称画布,既然是画布,当然是用来画图的.canvas技术指的是利用javascript操作canvas元素绘制图形的技术,要使用canvas,一定要浏览器支 ...

  7. JavaScript原生对象属性和方法详解——Array对象

    http://www.feeldesignstudio.com/2013/09/native-javascript-object-properties-and-methods-array/ lengt ...

  8. python学习笔记8--面向对象--属性和方法详解

    属性: 公有属性  (属于类,每个类一份) 普通属性  (属于对象,每个对象一份) 私有属性    (属于对象,跟普通属性相似,只是不能通过对象直接访问) 方法:(按作用) 构造方法 析构函数 方法: ...

  9. [js高手之路] 设计模式系列课程 - jQuery的extend插件机制

    这里在之前的文章[js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数基础上增加一个extend浅拷贝,可以为对象方便的扩展属性和方法, jquery的插件扩展机制,大致就是这 ...

随机推荐

  1. Javasript 正则匹配任意字符

    今天在写Js匹配任意字符的时候发现使用.不好使,当输入内容有回车的时候就会失效. 后来上网查,发现js的任意字符不包括\n. 本来想写一个trim后长度为10的正则验证,最后使用[\s|\S]来代替任 ...

  2. 【SqlServer系列】子查询

    1   概述 1.1  已发布[SqlServer系列]文章 [SqlServer系列]SQLSERVER安装教程 [SqlServer系列]数据库三大范式 [SqlServer系列]表单查询 [Sq ...

  3. js继承之Object.create()

    通过 Object.create() 方法,使用一个指定的原型对象和一个额外的属性对象创建一个新对象.这是一个用于对象创建.继承和重用的强大的新接口.说直白点,就是一个新的对象可以继承一个对象的属性, ...

  4. docker~学习笔记索引

    回到占占推荐博客索引 使用docker也有段时间了,写了不少文章与总结,下面把它整理个目录出来,方便大家去学习与检索! docker~学习笔记索引 docker~linux下的部署和基本命令(2017 ...

  5. [C++]智能指针的实现与使用

    智能指针 智能指针是当我们在使用对象时,有时会把对象的内存分配在堆上忘记释放,导致内存泄露,并且当多个指针共享同一个对象的内存时,容易出现重复释放内存,导致错误. 我们针对所需要共享的对象,手动完成一 ...

  6. [luogu P3786]萃香抱西瓜 [spfa][状态压缩]

    题目背景 伊吹萃香(Ibuki Suika)正在魔法之森漫步,突然,许多西瓜(Suika)从四周飞来,划出了绚丽的轨迹.虽然阵势有点恐怖,但她还是决定抱走一些西瓜. 题目描述 萃香所处的环境被简化为一 ...

  7. ARM开发(2)基于STM32的蜂鸣器

    基于STM32的蜂鸣器 一 蜂鸣器原理:  1.1 本实验实现1个蜂鸣器间隔1S鸣叫.  1.2 实验思路:根据电路图原理,给蜂鸣器相关引脚赋予高低电平,实现电路的导通,使蜂鸣器实现鸣叫或不鸣.  1 ...

  8. 前端十万个为什么(之一):我们为什么需要npm?

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } span ...

  9. linux下使用scp远程传输自动输入密码

    由于需要将A服务器的文件 远程传输到B服务器 但是scp命令每次都要手动输入密码 这样脚本执行太繁琐,所以讲A服务器和B服务器互信即可,具体操作如下: 首先在A服务器配置: mkdir -p ~/.s ...

  10. git 安装 和 基本操作

    林纳斯的小故事 感兴趣的同学可以自己百度一下 版本控制常用svn git @@@svn 1 搭建环境 server:visualSVN Serverserver port: https 默认443ht ...