TypeScript判断对象类型的4种方式代码
更新时间:2023年07月22日 11:08:54 作者:苍穹之跃
这篇文章主要给大家介绍了关于TypeScript判断对象类型的4种方式代码,TypeScript能根据一些简单的规则推断(检查)变量的类型,你可以通过实践很快的了解它们,需要的朋友可以参考下
一、typeof
typeof ""; //string
typeof 1; //number
typeof false; //boolean
typeof undefined; //undefined
typeof function(){}; //function
typeof {}; //object
typeof Symbol(); //symbol
typeof null; //object
typeof []; //object
typeof new Date(); //object
typeof new RegExp(); //object二、instanceof
{} instanceof Object; //true
[] instanceof Array; //true
[] instanceof Object; //true
"123" instanceof String; //falsenew String(123) instanceof String; //true三、constructor
function instance(left,right){
let prototype = right.prototype; //获取类型的原型
let proto = left.__proto__; //获取对象的原型
while(true){ //循环判断对象的原型是否等于类型的原型,直到对象原型为null,因为原型链最终为null
if (proto === null || proto === undefined){
return false;
}
if (proto === prototype){
return true;
}
proto = proto.__proto__;
}
}
console.log(instance({},Object)); //true
console.log(instance([],Number)); //false四、Object.prototype.toString()
function getType(obj){
let type = typeof obj;
if(type != "object"){
return type;
}
return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1');
}使用案例:
<!--src/App.vue-->
<script setup lang="ts">
const vFocus = {
mounted: (el: HTMLElement, binding: any) => {
// 指令绑定的元素
console.log(typeof el);
console.log(el);
// 指令绑定的参数
console.log(binding)
// 如果是输入框
if (el instanceof HTMLInputElement) {
// 元素聚焦
el.focus();
el.placeholder = '请输入';
el.value = '勤奋、努力'
}else if (el instanceof HTMLAnchorElement) {
// 如果是<a>标签我们就导向 百度翻译
el.href='https://fanyi.baidu.com/'
}
}
}
</script>
<template>
<input v-focus/>
<p/>
<a v-focus href="https://www.baidu.com/" rel="external nofollow" >百度一下,你就知道</a>
</template>
总结
相关文章
javascript addBookmark 加入收藏 多浏览器兼容
不错的加入收藏代码,加入了对一些常见浏览器的判断,更好的体现用户体验,兼容了ie,firefox.2009-08-08
Bootstrap滚动监听组件scrollspy.js使用方法详解
这篇文章主要为大家详细介绍了Bootstrap滚动监听组件scrollspy.js的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-07-07
JS pushlet XMLAdapter适配器用法案例解析
这篇文章主要介绍了JS pushlet XMLAdapter适配器用法案例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
JavaScript中如何通过arguments对象实现对象的重载
js 中不存在函数的重载,但却可以通过arguments对象实现对象的重载,下面有个不错的示例,大家可以参考下2014-05-05
javascript设计模式 – 简单工厂模式原理与应用实例分析
这篇文章主要介绍了javascript设计模式 – 简单工厂模式,结合实例形式分析了javascript简单工厂模式基本概念、原理、定义、应用场景及操作注意事项,需要的朋友可以参考下2020-04-04


最新评论