一、js的数据类型
JavaScript一共有8种数据类型,其中有7种基本数据类型:Undefined、Null、Boolean、Number、String、Symbol(es6新增,表示独一无二的值)和BigInt(es10新增);
二、js的数据类型转换
在 JS 中类型转换只有三种情况,分别是:
- 转换为布尔值(调用Boolean()方法)
- 转换为数字(调用Number()、parseInt()和parseFloat()方法)
- 转换为字符串(调用.toString()或者String()方法)
三、js数据类型的判断
(1)typeof
typeof 对于原始类型来说,除了 null 都可以显示正确的类型
console.log(typeof 2); // number
console.log(typeof true); // boolean
console.log(typeof 'str'); // string
console.log(typeof []); // object []数组的数据类型在 typeof 中被解释为 object
console.log(typeof function(){}); // function
console.log(typeof {}); // object
console.log(typeof undefined); // undefined
console.log(typeof null); // object null 的数据类型被 typeof 解释为 object
其他(数字Number,布尔值Boolean,字符串String,函数Function,对象Object,Undefined)这一些数据类型在typeof 下都被精准的解释,只有数组和null的数据类型不够精准。那么如何才能获取到 数组 和 null 的精准数据类型。这就用到下面这种方法。
(2)instanceof
console.log(2 instanceof Number); // false
console.log(true instanceof Boolean); // false
console.log('str' instanceof String); // false
console.log([] instanceof Array); // true
console.log(function(){} instanceof Function); // true
console.log({} instanceof Object); // true
// console.log(undefined instanceof Undefined);
// console.log(null instanceof Null);
以上结果显示,直接的字面量值判断数据类型,只有引用数据类型(Array,Function,Object)被精准判断,其他(数值Number,布尔值Boolean,字符串String)字面值不能被instanceof精准判断。
instanceof 在MDN中的解释:instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。其意思就是判断对象是否是某一数据类型(如Array)的实例,请重点关注一下是判断一个对象是否是数据类型的实例。在这里字面量值,2, true ,'str'不是实例,所以判断值为false。
(3)contructor
使用constructor 返回对象的构造函数
console.log((2).constructor === Number); // true
console.log((true).constructor === Boolean); // true
console.log(('str').constructor === String); // true
console.log(([]).constructor === Array); // true
console.log((function() {}).constructor === Function); // true
console.log(({}).constructor === Object); // true
创建一个对象,更改它的原型,constructor就会变得不可靠了
function Fn(){};
Fn.prototype=new Array();
var f=new Fn();
console.log(f.constructor===Fn); // false
console.log(f.constructor===Array); // true
(4)Object.prototype.toString.call()
var a = Object.prototype.toString;
console.log(a.call(2));//number
console.log(a.call(true));//Boolean
console.log(a.call('str'));//String
console.log(a.call([]));//Array
console.log(a.call(function(){}));//Function
console.log(a.call({}));//Object
console.log(a.call(undefined));//Undefined
console.log(a.call(null));//Null
四、null 和 undefined 的区别
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
五、this、call、apply和bind的理解
- 在浏览器里,在全局范围内this 指向window对象;
- 在函数中,this永远指向最后调用他的那个对象;
- 构造函数中,this指向new出来的那个新的对象;
- call、apply、bind中的this被强绑定在指定的那个对象上;
- 箭头函数中this比较特殊,箭头函数this为父作用域的this,不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来;
- apply、call、bind都是js给函数内置的一些API,调用他们可以为函数指定this的执行,同时也可以传参。
call、apply、bind这三个方法都可以用来改变this的指向。三者最大的区别是call和apply会改变this的指向并且立即执行函数,但是bind方法不会立即执行函数,而是会返回this改变后的函数。
(1)fn.call()
当call方法执行的时候会做三个事情:
1.首先要把操作的函数中的this关键字变为call方法第一个传递的参数。
2.把call方法第二个及以后的参数获取到
3.把要操作的函数执行,并且把第二个以后传递进来的实参传递给函数
4.如果不传参数,或者第一个参数是null
或nudefined
,this
都指向window
let fn = function(a,b){
console.log(this,a,b);
}
let obj = {name:"obj"};
fn.call(obj,1,2); // this:obj a:1 b:2
fn.call(1,2); // this:1 a:2 b:undefined
fn.call(); // this:window a:undefined b:undefined
fn.call(null); // this=window a=undefined b=undefined
fn.call(undefined); // this=window a=undefined b=undefined
5.call中的this总是指向调用函数的对象
let obj = {
eat(){
console.log("吃八方财")
}
}
function fn(){
console.log(this); //window
obj.eat.call(this) // window
}
fn() // window.fn()
未创建实例,则this指向window
let obj = {
eat(){
console.log("吃八方财")
}
}
function fn(){
console.log(this); // ff
obj.eat.call(this) // ff
}
let ff = new fn()
ff.fn()
创建实例,则this指向实例对象。
(2)fn.apply()
apply和call基本上一致,唯一区别在于传参方式:apply把需要传递给fn的参数放到一个数组(或者类数组)中传递进去,虽然写的是一个数组,但是也相当于给fn一个个的传递
fn.call(obj, 1, 2);
fn.apply(obj, [1, 2]);
(3)fn.bind()
bind:语法和call一模一样,区别在于立即执行还是等待执行
bind绑定的函数不立即执行,需要加括号才执行。this和参数的形式与call一样,参数是一个一个的
let obj = {
eat(){
console.log("吃八方财")
}
}
function fn(name,age){
console.log(name , age);
}
fn.bind(obj, 'xiaohong', 18)
//结果
fn(name,age){
console.log(name,age)
}
//不加括号其实返回的是绑定的函数。
//如果加上括号就会立即执行:
//xiaohong 18
fn.call(obj, 1, 2); // 改变fn中的this,并且把fn立即执行
fn.bind(obj, 1, 2); // 改变fn中的this,fn并不执行
bind函数会返回一个this改变后的函数
var a = {
user:"追梦子",
fn:function(e,d,f){
console.log(this.user); //追梦子
console.log(e,d,f); //10 1 2
}
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);
var obj = {};
function test() {
console.log(this === obj);
}
test(); //false
var testObj = test.bind(obj);
testObj(); //true