当前位置:   article > 正文

es6类,判断数据类型

es6类,判断数据类型

es6的类

今日目标:

1.判断数据类型的方法

2.es6的类

3.es6类实现轮播图

00-回顾

# 原型

`作用`:共享属性和方法

`特性`1. 每一个函数,这里特指构造函数,都会有一个`prototype`,这个就是原型对象,也叫显式原型。挂载到原型对象上的属性和方法可以被共享
	2. 每一个实例对象都有一个`__proto__`, 现代浏览器写作`[[prototype]]`,这个就是隐式原型。它会指向构造函数的原型对象。实际开发中,不会用到隐式原型,它只起到指向的作用
	3. 每一个构造函数的原型对象都会有一个`constructor`,这个是构造器,它会指回构造函数本身
    
    
# 原型链

`作用`:规定了属性和方法的查找规则。
	=> 先在构造函数身上查找,找到就使用,并终止查找;没有找到就在构造函数的原型对象上继续查找,如果没有找到,就继续在Object的原型对象上查找,如果还是没找到,就报错

`特性`1. 构造函数的原型对象也是一个对象,它也会有`__proto__`这个隐式原型,它会指向Object的原型对象
    2. Object的原型对象又是一个对象,它也会有`__proto__`这个隐式原型,它会指向null
    3. Object的原型对象也会有一个`constructor`构造器,它会指回Object构造函数本身
    
# swiper轮播图插件的使用
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

01-判断数据类型的方法

# typeof: 只能用来判断基本数据类型
typeof '123' 'string'
typeof 123 'number'
typeof null 'object'
typeof [1,2,3] 'object'
typeof {uname: '小妲己'} 'object'
typeof function() {} 'function'

# constructor构造器
// 原理:实例对象本身是没有constructor属性的,但是可以根据原型链关系,实例对象可以使用构造函数的原型对象上的constructor构造器
// 不能判断undefined和null

[1,2,3].construtor // Array
{}.constructor // Obejct
'小妲己'.construtor // String

# instanceof:判断是否是构造函数的实例对象

// 不能判断基本数据类型
// 数组,函数,对象都是Object的实例对象,判断时,请把对象的判断放到最后
[1,2,3] instanceof Array // true

if (arr1 instanceof Array) {
    console.log('数组');
} else if (arr1 instanceof Function) {
    console.log('函数');
} else {
    console.log('对象');
}

得到:::[1,2,3] instanceof Array ? [] : {}
 另外一种检测数据类型的方法:更加精准
//[].__proto__.constructor == Array //true
//{}.__proto__.constructor == Object //true


# Object.prototype.toString.call()
// 最完美的判断方法,可以判断所有数据类型
Object.prototype.toString.call([1,2,3]) // '[object Array]'
Object.prototype.toString.call({}) // '[object Object]'
Object.prototype.toString.call('小妲己') // '[object String]'
Object.prototype.toString.call(undefined) // '[object Undefined]'

// 函数封装
function getType(data) {
    return Object.prototype.toString.call(data)
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

02-es6的类

``: 批量创建具有相同属性和方法的实例对象

`语法`class Person {
    // constructor: 构造器函数,绑定属性
    // 静态属性
    属性 =constructor(形参) {
        this.属性 =}
	// 原型方法
	方法名() {}
	// 静态方法: 类独有的方法,不可以被实例对象使用
	static 方法名() {}
}

`调用`let p1 = new Person(实参)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/294721
推荐阅读
相关标签
  

闽ICP备14008679号