• JS中的对象


    对象
    JavaScript 提供多个内建对象,比如 Object、String、Date、Array 等等,此外 JavaScript 允许自定义对象。

    对象只是带有属性和方法的特殊数据类型。

    1.创建 JavaScript 对象
    1.1 通过new关键字创建对象

    var obj = new Object();
    // 添加属性
    obj.name = "小明";
    // 添加方法
    obj.sleep = function () {
        console.log(this.name + "在睡觉");
    };


    1.2 通过字面量创建对象

    var obj = {
        name : "xiaoming",
        age : "18",
        show : function (girlfriend) {
            console.log(this.name + "的女朋友是" + girlfriend);
        }
    };


    注意: 属性名字可以加双引号也可以不加双引号。

    1.3 通过构造函数创建对象

    // 注意:此处建议方法名首字母大写
    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.say = function(name) {
            console.log("你好: " + name + "!");
        };
    }
    
    // 创建两个Person对象
    var person1 = Person("ande", 18);
    var person2 = Person("dahuan", 28);


    2.访问对象的属性
    2.1 通过点语法访问对象属性

    var obj = {
        name : "xiaoming",
        age : 18,
        show : function (girlfriend) {
            console.log(this.name + "的女朋友是" + girlfriend);
        }
    };
    // 访问属性值
    console.log(obj.name);   // 输出:"xiaoming"
    console.log(obj.age);    // 输出:18


    2.2 通过中括号法访问对象属性
    中括号法可以用变量作为属性名,而点方法不可以;
    中括号法可以用数字作为属性名,而点语法不可以。

    var obj = {
        name : "xiaoming",
        age : 18,
        110 : "110",
        show : function (girlfriend) {
            console.log(this.name + "的女朋友是" + girlfriend);
        }
    };
    // 访问属性值
    console.log(obj["name"]);   // 输出:"xiaoming"
    var age = "age";
    console.log(obj[age]);      // 输出:18
    console.log(obj["110"]);    // 输出:"110"


    3.访问对象的方法

    var obj = {
        name : "xiaoming",
        age : 18,
        show : function (girlfriend) {
            console.log("xiaoming的女朋友是" + girlfriend);
        },
        sleep : function () {
            console.log("xiaoming在睡觉")
        }
    };
    // 访问对象方法
    obj.show("小红");
    obj.sleep();

    4. this关键字
    this是JavaScript语言的一个关键字。

    它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。

    随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。

    4.1 纯粹的函数调用
    这是函数的最通常用法,属于全局性调用,因此this就代表全局对象(Global)。

    var index = 0;
    function fun() {
        // 此处的this代表就是全局对象window
        this.index = 1;
    }
    fun();
    console.log(index);   // 输出:1


    因为我们使用window.fun()来调用函数,调用函数的那个对象是window,所以this指向的也是window。

    4.2 作为对象方法的调用
    作为对象方法的调用,this 指向当前实例对象。

    var point = {
        x : 0,
        y : 0,
        moveTo : function(x, y) {
            this.x += x;
            this.y += y;
        }
    };
    
    point.moveTo(10, 10);
    console.log("x: " + point.x + " y: " + point.y);  // 输出:x: 10 y: 10

    因为使用point.moveTo()来调用函数,调用函数的那个对象是point,所以this指向的也是point。

    4.3 作为构造函数调用
    所谓构造函数,就是通过这个函数生成一个新对象(object),这时this就指这个新对象。

    function Student() {
        this.name = "ande";
    }
    var stu = new Student();
    console.log(stu.name);        // 输出:"ande"

    5. for…in 循环
    for…in 语句用于对数组或者对象的属性进行循环操作。

    for … in 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。

    【语法格式】

    for (变量 in 对象) {
    // 在此执行代码
    }

    for (变量 in 对象) {
        // 在此执行代码
    }

    “变量”用来指定变量,指定的变量可以是数组元素,也可以是对象的属性。

    // 1、遍历对象
    var obj = {
        name : "xiaoming",
        age : 18,
        sex : "男",
        tel : "18911450210"
    };
    // for...in循环遍历
    for(var attr in obj) {
        if (typeof obj[attr] != "function") {
            console.log("属性操作:" + obj[attr]);
        }
    }
    // 2.遍历数组
    var arr = ["11", "22", "33", "44", "55"];
    for(var attr in arr) {
        console.log(arr[attr]);
    }

    6. eval()函数
    eval()函数会将传入的字符串当做JavaScript代码进行执行,例如:eval(“2+3”) 返回的是5。。

    把JSON字符串转化为js认识的对象:

    var json = '[{"name" : "dahuan", "age" : 18}, {"name" : "xiaohuan", "age" : 20}]';
    // 把json字符串转化为js对象
    var arr = eval(json);
    // 对数据做解析
    for (var i = 0; i < arr.length; i++) {
        console.log("name: " + arr[i].name);
        console.log("age: " + arr[i].age);
    }

    注意:eval()是一个危险的函数,从安全性来讲不建议使用!

  • 相关阅读:
    ASP.NET 2.0 X64的奇怪问题
    【分享】从网上爬的WPF学习资料
    大家一起学习less 5:字符串插值
    大家一起学习less 3:命名空间
    我的模块加载系统 v18
    大家一起学习less 2:自带函数
    “计算机之子”的MVVM框架源码学习笔记
    我的MVVM框架 v0.1发布
    大家一起学习less 6:一些有用的混合函数
    less源码学习
  • 原文地址:https://www.cnblogs.com/amujoe/p/11070743.html
Copyright © 2020-2023  润新知