第十五章 检测数据类型及手写push、map、forEach代码

106 阅读1分钟

一、检测数据类型

  • typeof
  • constructor
  • A instanceof B
  • Object.prototype.toString.call(需要检测的数据)

1、typeof

typeof 需要检测的数据
typeof 'sss'

2、constructor

  • 检测原理:通过原型上的constructor的指向为函数本身来确定函数类型
/*这个属性之所以能够用来判断数据类型
    为实例调用constructor都是用来调用的原型上的constructor,指向就是构造函数本身*/    
function isArray(a){
          return  a.constructor ===Array
      
    }
    //Array.isArray()  es6新增的API
    isArray([])//ture
    isArray({})//ture

3、instanceof

  • 用法:A instanceof B (B一般为数据类型)
  • 原理:从A到基类的原型,在这条原型链上没有B的原型的存在;
    特殊:只能适用于引用数据类型,值类型不适用
    let ary = []
    var num = 1;
    console.log(num instanceof Number);
    
    console.log(ary instanceof Number );
    console.log(ary instanceof Array );
    console.log(ary instanceof Object );
    

4、手写push、forEach、map

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        function Person(name, age) {
            this.name = name;
            this.age = age;
        };
        Person.prototype.eat = function () {};
        let p1 = new Person('张三', 1);
        console.log(p1);
        /*   for (let k in p1) {
              console.log(p1.hasOwnProperty(k))
              console.log('属性名', k, '属性值', p1[k]);
          }; */

        console.log(Object.keys(p1)); //把p1中的私有属性名都以字符串的形式存放到一个数组当中返回
        Object.keys(p1).forEach((k) => {
            console.log(k);

        })



        //检测是不是公用的
        Object.prototype.hasPubProperty = function (key) {
            //this==>p1      key是不是this 的共有属性
            //首先得是我们能够调用的属性,并且不是私有的,这是才是共有的
            //in 在js中的翻译直白点就是   在     A  in  B   :B是否能够调用A的属性 
            return (key in this) && !this.hasOwnProperty(key)
        }


        p1.hasPubProperty('eat') //ture       
        p1.hasOwnProperty('name') //false


        //自己实现一个mypush  功能等同push
        var ary = [1,2,4]
       /*  Array.prototype.mypush = function(item){
                 this[this.length] = item;
                 return this.length;
        }
        ary.mypush(3)
 */

        //...用在形参叫剩余 用在实参叫展开
      /*   Array.prototype.mypush = function(...item){
            item.forEach(k=>{
                this[this.length]=k
            })
            return this.length;
        } */


        //myforEach
      /*   Array.prototype.myforEach  = function(cb){
            for(var i = 0;i<this.length;i++){
                cb(this[i]);
            }
        }
        ary.myforEach((item)=>{
            console.log(item);
        }) */
        
        //myMap     新数组中的项是由回调函数的返回值决定的
        Array.prototype.myMap = function(cb){
            //myMap返回值是一个新数组,长度和this是一样的,新数组中的每一项都是由cb的返回结果是一样的
            let array = [];
            array.length = this.length;
            for(var i = 0;i<this.length;i++){
                array[i]=cb(this[i]) 
            }
            return array
            
        }
        ary.myMap(item=>{
            return 
        })

    </script>
</body>

</html>

习题

var num=10;
var obj={num:20};
obj.fn=(function(num){
   this.num=num*3;
   num++;
   return function(n){
       this.num+=n;
       num++;
       console.log(num);
   }
})(obj.num);
var fn=obj.fn;
fn(5);
obj.fn(10);
console.log(num,obj.num)
function Fn(){
    this.x=100;
    this.y=200;
    this.getX=function(){
        console.log(this.x);
    }
}
Fn.prototype.getX=function(){
    console.log(this.x);
}
Fn.prototype.getY=function(){
    console.log(this.y);
}
var f1=new Fn;
var f2=new Fn;
console.log(f1.getX==f2.getX);
console.log(f1.getY==f2.getY);
console.log(f1.__proto__.getY==Fn.prototype.getY);
console.log(f1.__proto__.getX==f2.getX);
console.log(f1.getX===Fn.prototype.getX);
console.log(f1.constructor);
console.log(Fn.prototype.__proto__.constructor);
f1.getX();
f1.__proto__.getX();
f2.getY();
Fn.prototype.getY();
var fullName="languge";
var obj={
    fullName:'javascript',
    prop:{
        getFullName:function(){
            return this.fullName;
        }
    }
};
console.log(obj.prop.getFullName());
var test=obj.prop.getFullName;
console.log(test());
var name="window";
var Tom={
    name:"Tom",
    show:function(){
        console.log(this.name);
    },
    wait:function(){
        var fun=this.show;
        fun();
    }
};
Tom.wait();
function fun(){
    this.a=0;
    this.b=function(){
        alert(this.a);
    }
}
fun.prototype={
    b:function(){
        this.a=20;
        alert(this.a);
    },
    c:function(){
        this.a=30;
        alert(this.a)
    }
};

var my_fun=new fun();
my_fun.b();
var n=2;
var obj={
    n:3,
    fn:(function(n){
      n+=2;
      this.n+=2;
      var n=5;
      return function (m){
         this.n*=2;
         console.log(m+(++n));
      }
    })(n)

};
var fn=obj.fn;
fn(3);
obj.fn(3);
console.log(n,obj.n)