JS高级语法-对象有关的常用API---isPrototypeOf()、hasOwnProperty()、instanceof、typeof、in

239 阅读9分钟

@写在前面 :对于初学者友好,变量声明没有采取ES6标准,请自行食用

以下为个人学习中结合老师所讲的个人理解,如果帮助到喜欢学习的你我将倍感荣幸,如果有哪里缺漏或错误的地方望指正

本文将简单介绍关于对象以及原型的几个常用方法和操作符的含义及用法

1.isPrototypeOf()

isPrototypeOf()-用来检测调用者的原型对象是否在另一对象(参数)的原型链上返回布尔值(Boolean)
简单用法可以检侧当前对象(参数)是否基于调用该方法的构造函数创建出来的
如果说当前对象在另一对象的原型链上或者说当前对象是另外一个对象的原型,就返回true,如果不在就返回false

语法

prototypeObj.isPrototypeOf(obj); -- 构造函数.原型(原型对象).isPrototypeOf(对象实例);

例:

//创建一个人类构造函数
funciton Person(name,age){
    this.name=name;
    this.age=age;
    this.show=function(){
	console.log(this.name);
    }
}
//showInfo方法放在构造函数的原型里
Person.prototype.showInfo=function(){
    console.log(this.name);
}

//创建一个人类实例对象
var p1=new Person("张三",23);
//再创建一个普通对象
var obj=new Object();

将以上创建的构造函数以及对象实例的检测结果分别进行输出并解释
其中Person.prototype以及Object.prototype分别为PersonObject的原型对象

//描述1:检测Person的原型对象是否在p1实例对象的原型链上
//描述2:检测实例对象p1是否基于构造函数Person创建
console.log(Person.prototype.isPrototypeOf(p1));//--true 
console.log(p1);

isPrototypeOf()_1 从上图我们可以看出,该检测结果为true,表明p1实例对象就是基于Person构造函数创建的,p1的原型链上,存在Person构造函数的原型对象

这也就是isPrototypeOf()的作用

这里可以实验一下新创建的obj实例对象

//因为Person继承了Object,所以基于Person创建的实例对象的原型链上是有Object的,而且Object是原型链的终点,所以为true
console.log(Object.prototype.isPrototypeOf(p1));//--true检测Object的原型对象是否在p1实例对象的原型链上
//这个就不用多讲了,obj就是基于Object创建的
console.log(Object.prototype.isPrototypeOf(obj));//--true检测Object的原型对象是否在obj实例对象的原型链上
//这里表明Person对象继承了Object的原型对象,Object的原型对象在Person对象的原型链上
console.log(Object.prototype.isPrototypeOf(Person));//-true
//这里是false,原因是obj实例对象并不是基于Person这个构造函数创建的,而且Object已经是最大的了,没有祖先的特性继承给它,所以obj这个实例对象的原型链上是不会存在Person.prototype的,只会存在Object的原型对象依旧是Object
console.log(Person.prototype.isPrototypeOf(obj));//--false检测Person的原型对象是否在obj实例对象的原型链上

使用场景:某一对象(参数对象)是否基于某个构造函数(调用对象)创建时可以使用,判断某一对象(调用该方法的对象)是否在另一对象(该方法的参数对象)的原型链上时


2.hasOwnProperty()

hasOwnProperty()-判断一个对象的属性或方法是来自构造函数内部,而不是继承自原型链,当一个某个对象的属性或方法不是来自于构造函数内部,那么必然来自于对象的原型也就是构造函数的原型或原型链上,返回布尔值truefalse

语法

obj.hasOwnProperty("fn/prop") -- 对象.hasOwnProperty(方法/属性)

例:

//创建一个构造函数Person
function Person(name,age){
    this.name=name;
    this.age=age;
    this.show=function(){
        console.log(this.name);
    }
}
Person.prototype.showInfo=function(){
    console.log(this.name);
}
var p2=new Person("张三",25);
console.log(p2);
console.log(p2.hasOwnProperty("show"));//true
console.log(p2.hasOwnProperty("showInfo"));//false

使用hasOwnProperty()判断属性是否来自于该对象的构造函数内部并输出

hasOwnProperty()

从上图可以看到,show方法是来自于该对象(p2)的构造函数(Person)内部,所以结果返回true,而showInfo是在其构造函数的原型中,所以结果返回false,使用hasOwnProperty()可以直接判断该属性或方法是否属于某个构造函数内部,和继承没有任何关系,但是hasOwnProperty()本身是从Object.prototype继承而来的

使用场景:判断指定对象的某个属性来自于对象的构造函数内部还是来自于构造函数的原型


3.instanceof

instanceof操作符用于判断变量类型或者对象类型具体属于某种引用类型,也可理解为判断该变量类型是否是某个构造函数的实例
或判断操作符左边的值(对象或变量的类型)是否在操作符右边的值(构造函数/对象)的原型链上

语法

a instanceof obj -- 变量(或实例) instanceof 构造函数/对象
以上写法表示,判断a的具体类型是否是 obj,或表示判断obj是否是a的构造函数,还可以判断a(实例)的原型链上是否有obj.prototype(obj构造函数.prototype原型)

例:

//创建一个构造函数和实例对象
function Person(){

}
var p=new Person();
console.log(p instanceof Person);//true

这里说明p实例的具体类型是Person (因为p是基于Person这个构造函数实现实例化的)

//接着创建一个老师构造函数模拟类的继承
function Teacher(){}
Teacher.prototype=new Person();//这里让Teacher的原型对象成为了Person的实例化,也就是实现了原型继承,Teacher的原型对象就继承了Person的属性
var t=new Teacher(); //实例化一个对象
console.log(t instanceof Teacher);//true---这个在上一步已经验证过了
console.log(t instanceof Person);//true ---这里是true说明了t这个实例的原型链上存在Person的原型,简单来讲t是Teacher的亲儿子,因为Teacher继承了Person,也就表明了t也是Person的后代

看起来挺复杂的,又是有关于原型链的,实际的用途就很简单,instanceof用来判断当前变量的类型是否是某个具体的类型,是就返回true,不是就返回false就是这么简单

例如:

console.log(new Array(1,2,4) instanceof Array);//true
console.log(new Number(133) instanceof Number );//true
console.log(new String("334") instanceof String);//true
//当然也可以判断其继承与某个类型
console.log(new Array(1,4,3) instanceof Object);//true

4.typeof

typeof用于获取变量或数据或表达式的数据类型,并以小写字符串的形式返回
typeof一般返回:number,string,boolean,string,function,object以及undefined等,当然ES6新增的数据类型也会被其检测出来
缺点:typeof无法精确判断null数组对象正则等类型。只能进行一些简单的变量判断,如果需要判断具体数据类型可以使用组合的方法判断。例如:先判断是否是原始数据类型,但如果返回的是Object就可以使用instanceof判断是否是某个具体类型 语法: 有两种写法:1.typeof(被检测对象)、2.typeof 被检测对象
例如: typeof (123)/typeof 123

例:

console.log(typeof(123));//number
console.log(typeof [1,2,3]);//object
console.log(typeof new String)//object
console.log(typeof new Function);//function
console.log(typeof "124");//string
console.log(typeof undefined);//undefined
console.log(typeof new RegExp);//object
console.log(typeof null);//object

上述测试中,使用typeof测试null返回了Object,这是js的一个历史遗留的bug,原因和底层存储变量的机器码有关,为了兼容性,js没有更改这个bug,null本身并不是一个Object它相当于一个空指针,是一个只有一个值的特殊类型,用于修饰对象的'空',表示一个空的对象引用。当某个对象被赋值为null时,表明该对象被清空。


5.in

in操作符用于检测当前对象是否具有对应属性和方法,通常用于代码的健壮性,不论属性方法存在于对象的构造函数内部还是原型中,只要存在就会返回true
语法 prop in obj 该prop(属性)是否属于该obj(对象)

例:

//创建一个构造函数
function Person(name,age){
    this.name=name;
    this.age=age;
    this.showInfo=function(){
        console.log(this.name);
    }
    
    Person.prototype.show=function(){
        console.log(this.age);
    }
}
//创建一个对象实例
var p3=new Person("王麻子",34);
console.log("name" in p3);//true
console.log("showInfo in p3");//true
console.log("show" in p3);//true

in操作符可以用于检测对象是否有对应的key,跟上述作用一样。 对于以上5中与对象有关的检测判断方法,这里只简单介绍了它们的作用及使用方法,如要深入了解,有机会一定写一篇更详尽的文章。

以上5中方法中,hasOwnProperty()in常被用来组合判断某个对象的方法或属性是否存在于其构造函数的原型中。也属于面试题当中的一个,当然其核心不是要写出完美的代码,而是要充分理解构造函数,原型,原型链,所以需要灵活使用一些方法进行组合搭配,以此来检验开发者对知识点掌握的程度和运用的熟练性。

@写在后面,针对于以上关于对象的操作符和方法,在理解方面可以借鉴,有任何不对的地方望指正,因为本文作者也是一个正在勤奋学习中的-jser

小酌一道面试题:

//面试题:编写一个方法:转入两个参数 key & 对象,判断当前key是否在对象的原型中,如果在返回真,不在返回false

//首先,编写一个hasOwnPrototype方法并传入形参
function hasOwnPrototype(key,obj){
    //判断当前key是否在obj对象的原型上
    //可以先运用如上API中的in,检测key是否是obj的属性或方法
    if(key in obj){
        //如果key属于obj,接下来就判断他是否存在于obj的构造函数中
        if(obj.hasOwnProperty(key)){
            //如果在其构造函数中,也就说明不在原型上
            return false;
        }else{
            return true;//那么就只剩下了在这个对象的构造函数中了
        }
    }else{
        //如果key不属于obj,也就说明key既不存在于obj的原型上,也不在obj的构造函数中
        return false;
    }
}

function Person(name,age){
    this.name=name;
    this.age=age;
    this.showInfo=function(){
        console.log(this.name);
    }
    
    Person.prototype.show=function(){
        console.log(this.age);
    }
}
//创建一个对象实例
var p3=new Person("王麻子",34);

console.log(hasOwnPrototype("show",p3));//true
console.log(hasOwnPrototype("showInfo",p3));//false  -这里的showInfo是来自p3实例对象的构造函数Person内部,所以返回false

      💖文章到这里就结束了,我会继续努力学习,逐步将更多的优质内容发表出来,供前端方向的学习者借鉴,让我们共同进步,一起成长,我们的未来不是梦!🌈🌈🌈😀