初识JS-2

最新推荐文章于 2024-09-26 19:38:44 发布

Zxt0518

最新推荐文章于 2024-09-26 19:38:44 发布

阅读量145

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/Zxt0518/article/details/107584058

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JS默认提供了很多类

Number类

   var n=new Number("100");
   console.log(n); //Number {100}
   console.log(typeof n);//typeof查看对象的数据类型，object
   console.log(n instanceof Number);//true
   //instanceof是一个运算符，判断一个对象是否属于某个类

String类

   var s=new String("hello world");
   console.log(s); //String {hello world}
   console.log(typeof s);//typeof查看对象的数据类型，object
   console.log(s instanceof String);//true
   console.log(s instanceof Number);//false
   //instanceof是一个运算符，判断一个对象是否属于某个类

Boolean类

   var b=new Boolean(true);
   console.log(b); //Boolean {true}
   console.log(typeof b);//typeof查看对象的数据类型，object
   console.log(b instanceof Boolean);//true
   //instanceof是一个运算符，判断一个对象是否属于某个类

Object类

  //想要写一个对象，都需要通过new一个构造器（类），得到一个对象
 var obj=new Object(); //new一个构造器得到一个对象
  obj.name="wc";
  obj.age=100;
  console.log(obj);//obj{name:"wc",age:100}

  //下面写法是上面写法的语法糖（简写方式）
  //字面量形式声明一个对象
  var obj ={
      name:"wc",
      age:100,
  }
  console.log(obj);//obj{name:"wc",age:100}

Date类

   var d=new Date();
    console.log(d);//输出当前系统时间
    console.log(d.getFullYear());
    console.log(d instanceof Date);// true

Array类

  //Array是一个内置类 
    var arr = new Array("a","b","c");
    console.log(arr);
    console.log(arr instanceof Array);//true

     // 是上面的形式的语法糖
    var arr2 = ["d","e","f"];  // 字面量创建数组（对象）
    console.log(arr2); // ["d", "e", "f"]

JS中的一切都是对象

证明1：html元素是一个对象

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    //证明一：html元素是一个对象
    //只要能打点调用就能证明该元素是对象
    let lis = document.getElementsByTagName("li");
    console.log(lis);
    console.dir(lis[0]);
    //console.dir()可以显示一个对象的所有属性和方法
</script>

证明2：数组是一个对象

// 证明二：数组也是对象   对象里面有一堆的属性和方法
    var arr = ["a","b","c"]; // 也是Array这个类
    console.log(arr); // ["a", "b", "c"]
    console.dir(arr);
    console.dir(typeof arr); // object
    console.log(arr.length);
    arr.push("d");
    console.log(arr);
    console.log(arr instanceof Array); // true

证明3：函数是一个对象

 // 证明3：函数也是对象
    function f(a,b) {
        console.log("f...");
        return "f.....";
    }
    console.dir(f)
    console.dir(f.name)
    console.log(f().length)//5
    f.call()
    f.apply()
    f.bind()
    console.log(f instanceof Function); // true
    console.log(typeof f); // function

证明4：基本数据类型是一个对象

// 证明4：基本数据类型也是对象(基本数据类型在某些情况下也是对象)
    var a = 110; // 现在要证明a也是对象
    console.dir(a);  // 110
    console.log(typeof a) // number
    console.log(a instanceof Number) // false

    // 如果a不是对象  是不可能打点调用toFiexed
    console.log(a.toFixed(3)); // 110.000
    // 上面的a叫包装对象
    // 上面调用toFixed时，它会把a瞬间包装成一个对象

    var str = "hello";
    console.log(str.length);  // 5  str也是瞬间包装成对象了
    console.log(str.toUpperCase()); // HELLO

对象中的属性有4大特征

1.configurable 表示是否可以被删除 true表示可以删除
2.writable 表示是否可以修改 true表示可以修改
3.enumerable 是否可以枚举 true表示可以输出
4.value 属性值默认是undefind

   var obj = {
        name: "小张",
    }
    console.log(Object.getOwnPropertyDescriptor(obj, "name"));
    //Object.getOwnPropertyDescriptor(obj,prop)获取属性的特征
    //obj查找目标对象，prop对象中的属性名。
    // value: "小张"
    // configurable: true
    // writable: true
    // enumerable: true
    obj.age = 21;
    //给一个对象添加一个属性时，也可以设置上面的4个特征
    // Object.defineProperty()
    console.log(obj);
    console.log(Object.getOwnPropertyDescriptor(obj, "age"));
    //value: 21
    //configurable: true
    //enumerable: true
    //writable: true
    Object.defineProperty(obj, "age",{
    value: 22,
    configurable: false,
    enumerable: true,
    writable: false,
    });
    console.log(Object.getOwnPropertyDescriptor(obj, "age"));
    // value: 22,
    // configurable: false,
    // enumerable: true,
    // writable: false,
    
    
    var a = 10;
    console.log(Object.getOwnPropertyDescriptor(window, "a"));
    //value: 10
    //configurable: false
    //writable: true
    //enumerable: true

属性的分类

对象上的属性可以分为两类：
1.公有属性
2.私有属性
可以通过一个API可以查看一个属性是否是私有属性
hasOwnProperty();会返回一个布尔值，true为私有函数，false为公有函数

  var obj ={
        name:"小张",
        age:100,
    }
    //hasOwnProperty("name")看name是否是obj的私有属性
    console.log(obj.hasOwnProperty("name"));//true 是obj的私有属性
    console.log(obj.hasOwnProperty("age"));//true 是obj的私有属性
    console.log(obj.hasOwnProperty("toString"));//false 是obj的公有属性
    console.log(obj.hasOwnProperty("__proto__")); // false 查看__proto__是否是obj的公有属性
    console.log(obj.__proto__.hasOwnProperty("toString")); // true  查看toString是否是obj.__proto__这个对象的私有属性
    // 对于obj来说：name和age是它的私有属性  toString是它的公有属性
    // 对于obj.__proto__来说：toString是它的私有属性
    // 也就是说一个属性是私有属性还是公有属性，还需要看它针对是谁。

    var arr = ["a","b"];
    console.dir(arr);
    console.log(arr.hasOwnProperty("length")); // true
    console.log(arr.hasOwnProperty("push")); // false
    console.log(arr.hasOwnProperty("__proto__")); // false
    console.log(arr.__proto__.hasOwnProperty("push")); // true
    // delete只能删除私有属性  不能删除公有属性
    delete arr[0];
    console.log(arr);
    delete arr.push;
    console.dir(arr)
    //判断一个属性是否属于某个对象用in
    console.log(length in arr);//true:length是arr的属性

函数的4种角色

角色一：一个普通的函数
角色二：在对象中可以当成一个方法
角色三：类构造器
角色四：也可以当作一个对象

    //角色一：一个普通函数
    function f() {
        console.log("f...");
    }
    f();//作用1：让函数体执行  作用2；得到返回值

    //角色二：在对象中可以当成一个方法
    let obj = {
        say: function () {  // 方法
            console.log("say...")
        },
        sleep: function () { // 方法
            console.log("sleep...")
        }
    }
    obj.say();
    obj.sleep();
    
    //角色三：类  构造器
    function NBAPlayer() {
    }
    var nbaPlayer1 = new NBAPlayer();
    var nbaPlayer2 = new NBAPlayer();
    var nbaPlayer3 = new NBAPlayer();
    console.log(nbaPlayer1);
    console.log(nbaPlayer2);
    console.log(nbaPlayer3);

    //角色四：也可以当作一个对象
    function F(){
    }
    F.name1="咪咪";
    F.age1=2;
    console.log(F.name1);
    console.log(F.age1);

让函数充当一个类

    // 在JS中，函数也是一个类
    function f(name) {
        this.name = name;
    }
    // new f时  f后面的()可写可不写
    // 区别：写的话可以传递参数
    let obj = new f("wc");
    let obj2 = new f;
    console.log(obj.name);//wc
    console.log(obj2);//f {name: undefined}


    function NBAPlayer(name) {  // 类
        // console.log(this)
        this.name = name;
    }
    // new 运算符 肯定干几件事
    //    1）在构造器内部创建一个空对象
    //    2）让构造器中的this指向这个对象
    //    3）返回这个对象
    var p1 = new NBAPlayer("乔丹");
    var p2 = new NBAPlayer("科比");
    console.log(p1.name);//乔丹
    console.log(p2.name);//科比

    function F() {
        // 不官你这里返回了什么，只要是new，返回的肯定是一个对象
        return 123;
    }
    // 如果你new了，函数内部的返回值直接忽略
    let o = new F();
    console.log(o)

toString用法

一个小问题：什么情况下，让a可以等于1，也可以等于2，也可以等于3？
首先，a==1，==比较运算符，如果说a是一个number,直接比较相等就是true,否则就是false。
如果a不是number，两侧的数据类型就不一样，==强制要求，要比较就必须保证两侧操作数的数据类型一致，先转化为相同数据类型，然后再进行比较。

    var a={name:"wc"};
    console.log(a==1);//false
    // 如果a是一个对象,先把a转成字符串,字符串和number类型还是不一样
    // 然后尝试把字符串尝试转成数字,最后进行比较

也就是说对象和一个数字进行比较时，先把对象转成了字符串，再转成数字，最终还是数字和数字进行比较。在转字符串时，它会默认调用一个方法，叫toString。

    let a={
        n:0, //a对象的私有属性
        toString:function(){  //a对象的私有属性（方法）
            console.log("这是自己的toString...");
            //this==>a
            return ++this.n;
        }
    }
    console.log(a==1);//true
    console.log(a==2);//true
    console.log(a==3);//true


    let a = [1,2,3];
    // ....   shift
    a.toString = a.shift; // 你调用toString就相当于调用了shift
    //shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
    // a==1  先调用a.toString  内部调用了
    if(a==1 && a==2 && a==3){
        console.log("ok");
    }

注意：不只Object的原型对象上有toString,其它的构造器的原型对象上也有toString。
一个对象在调用toString时，如果它的原型上有toString方法，就调用它的原型上的toString。没有的话，和会找Object的原型对象上的方法。

    // toString的作用：
    let obj = {name:"wc"};
    // 1）此toString中的this是指obj
    console.log(obj.toString()); // [object Object]  它的调用的是Object.prototype.toString()
    let arr1 = [1,2,3];
    console.log(arr1.toString()); // 1,2,3  它调用的是Array.prototype.toString()
    let f = function () {}
    console.log(f.toString()); // function () {}  Function.prototype.toString()
    // 除了Object的原型对象上的toString之外，其它的构造器上面也有toString方法，
    // 一个对象在调用toSring时，如果它的原型上有toString方法，就调用它的原型上的toString。没有的话，和会找Object的原型对象上的方法