[js高手之路]原型对象(prototype)与原型链相关属性与方法详解
2017-08-26 16:01
911 查看
一,instanceof:
instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章
[js高手之路]构造函数的基本特性与优缺点
[js高手之路]一步步图解javascript的原型(prototype)对象,原型链
已经分享过了.
二、isPrototypeOf:
如果隐式原型__proto__指向调用isPrototypeOf()方法的对象原型( CreateObj ), 那么这个方法就返回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
四,实例访问属性和方法时,遵循就近查找原则
实例先在自己身上查找,有,就停止查找,如果没有,就沿着实例的__proto__继续往上查找,有,就停止查找,如果没有就继续沿着原型链一直往上查找,如果
所有的原型对象上都没有,那就是undefined.
五,hasOwnProperty
判断属性是实例上的还是原型对象上的,如果是实例上的,返回true, 原型上的返回false
六、in操作符
判断属性是否在实例或者原型对象上,只要一个满足条件,返回值都是true
七,结合in和hasOwnProperty的用法,可以封装一个函数判断这个属性是否在原型对象上, 返回值为true:在原型对象上, false:不在原型对象上
八、for...in 可以枚举实例和原型对象上的属性和方法,前提是:该属性和方法是可以枚举的
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)与原型链相关属性与方法详解
- [js高手之路]使用原型对象(prototype)需要注意的地方
- [js高手之路]使用原型对象(prototype)需要注意的地方
- [js高手之路]一步步图解javascript的原型(prototype)对象,原型链
- [js高手之路]使用原型对象(prototype)需要注意的地方
- [js高手之路]一步步图解javascript的原型(prototype)对象,原型链
- [js高手之路]使用原型对象(prototype)需要注意的地方
- [js高手之路]使用原型对象(prototype)需要注意的地方
- [js高手之路]一步步图解javascript的原型(prototype)对象,原型链
- [js高手之路]使用原型对象(prototype)需要注意的地方
- JS原型对象的创建方法详解
- js基础之DOM中元素对象的属性方法详解
- js 对象方法、类方法、原型方法的区别;私有属性、公有属性、公有静态属性
- js对象中原型(prototype)的使用方法、替换以及注意事项
- [js高手之路] es6系列教程 - 对象功能扩展详解
- JS函数的原型及对象,对象方法,对象属性的学习
- js之prototype用法(给对象添加通用属性/方法)
- 继承:《原型和原型链(prototype 属性使您有能力向对象添加属性和方法。)》
- 详解JS构造函数方法与原型prototype上的方法
- js的原型实例prototype--方法--属性,构造,赋值--方法同样有原型--原型含义