分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

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

发布时间:2023-09-06 01:06责任编辑:彭小芳关键词:js原型对象

一,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,如:

1         var obj1 = new CreateObj(‘ghostwu‘);2         var obj2 = new CreateObj(‘卫庄‘);3         console.log( CreateObj.prototype.isPrototypeOf( obj1 ) ); //true4         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        }

本文出自 “ghostwu” 博客,请务必保留此出处http://ghostwu.blog.51cto.com/11192807/1960235

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

原文地址:http://ghostwu.blog.51cto.com/11192807/1960235

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved