[js高手之路]原型对象(prototype)与原型链相关属性与方法详解
一,instanceof:
instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章
[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)与原型链相关属性与方法详解的更多相关文章
- [js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用
本文主要讲解DOM常用的CURD操作,appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),clo ...
- JavaScript的原型对象prototype、原型属性__proto__、原型链和constructor
先画上一个关系图: 1. 什么是prototype.__proto__.constructor? var arr = new Array; 1. __proto__是原型属性,对象特有的属性,是对象指 ...
- 原型对象prototype和原型属性[[Prototype]]
构造器:可以被 new 运算符调用, Boolean,Number,String,Date,RegExp,Error,Function,Array,Object 都是构造器,他们有各自的实现方式. 比 ...
- [js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数
一.我们从一个简单的构造函数+原型程序开始 var G = function(){}; G.prototype = { length : 5, size : function(){ return th ...
- js面向对象之公有、私有、静态属性和方法详解
现下,javascript大行其道,对于网站开发人员来说,javascript是必需掌据的一门语言,但随着jquery等框架的流行和使用,许多人对于原生javascript缺乏深入的理解,习惯了函数式 ...
- [js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法
canvas是html5中引入的一个新元素,俗称画布,既然是画布,当然是用来画图的.canvas技术指的是利用javascript操作canvas元素绘制图形的技术,要使用canvas,一定要浏览器支 ...
- JavaScript原生对象属性和方法详解——Array对象
http://www.feeldesignstudio.com/2013/09/native-javascript-object-properties-and-methods-array/ lengt ...
- python学习笔记8--面向对象--属性和方法详解
属性: 公有属性 (属于类,每个类一份) 普通属性 (属于对象,每个对象一份) 私有属性 (属于对象,跟普通属性相似,只是不能通过对象直接访问) 方法:(按作用) 构造方法 析构函数 方法: ...
- [js高手之路] 设计模式系列课程 - jQuery的extend插件机制
这里在之前的文章[js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数基础上增加一个extend浅拷贝,可以为对象方便的扩展属性和方法, jquery的插件扩展机制,大致就是这 ...
随机推荐
- cookie的存取
cookie的存取 /写cookies 一路径为标准,Path – 路径 function setCookie(name, value, time) { var strsec = getsec(tim ...
- [luogu P3787][新创无际夏日公开赛] 冰精冻西瓜 [树状数组][dfs序]
题目背景 盛夏,冰之妖精琪露诺发现了一大片西瓜地,终于可以吃到美味的冻西瓜啦. 题目描述 琪露诺是拥有操纵冷气程度的能力的妖精,一天她发现了一片西瓜地.这里有n个西瓜,由n-1条西瓜蔓连接,形成一个有 ...
- (转)HashMap深入原理解析
[HashMap]深入原理解析 分类: 数据结构 自考 equals与“==”(可以参考自己的另一篇博文) 1,基本数据类型(byte,short,char,int,long,float,double ...
- Spring源码情操陶冶-AbstractApplicationContext#initApplicationEventMulticaster
承接前文Spring源码情操陶冶-AbstractApplicationContext#initMessageSource 约定web.xml配置的contextClass为默认值XmlWebAppl ...
- ajax请求原理
首先分析使用ajax时候有那些不确定的因素 请求:1 请求的方式不确定 2 请求的地址不确定 3 请求是否异步不确定 4 发送的数据不确定 响应:5 返回的数据不确定 6 响应成功之后 需要处理的业务 ...
- 初学Python(二)——数组
初学Python(二)——数组 初学Python,主要整理一些学习到的知识点,这次是数组. # -*- coding:utf-8 -*- list = [2.0,3.0,4.0] #计算list长度 ...
- web项目-easyui-datagrid使用汇总
一,引言 工作的需要,做了3年的wpf--,又因为项目的需求,回归到web的开发. ■ 3 years ago,vue是我三年前没用过的玩意儿. ■ 3 years ago,bootstrap组件 ...
- 深入浅出数据结构C语言版(12)——从二分查找到二叉树
在很多有关数据结构和算法的书籍或文章中,作者往往是介绍完了什么是树后就直入主题的谈什么是二叉树balabala的.但我今天决定不按这个套路来.我个人觉得,一个东西或者说一种技术存在总该有一定的道理,不 ...
- 网站限制某些ip访问,仅允许某些ip…
代码: function getIP() { return isset($_SERVER["HTTP_X_FORWARDED_FOR"])?$_SERVER["HTTP_ ...
- 第二棵树:Splay
Splay这东西神难打--什么都没动板子敲上就直逼200行了,而且非常难记(仿佛是模板长的必然结果).但是为什么还要学呢?据说是因为它可以实现区间操作.但是自从我得知无旋Treap也能做到这些,默默对 ...