• JavaScript-----12.对象


    1. 对象

    万物皆对象,但是对象必须是一个具体的事物。例如:“明星”不是对象,“周星驰”是对象;“苹果”不是对象“这个苹果”是对象。Js中,对象是一组无序的相关属性和方法的集合。
    对象是由属性和方法组成的

    • 属性:事物的特性,在对象中用属性来表示(常用名词)
    • 方法:事物的行为,在对象中用方法来表示(常用动词)

    2.创建对象的三种方法

    • 利用字面量来创建对象
    • 利用new Object创建对象
    • 利用构造函数来创建对象

    2.1 利用字面量来创建对象

    对象字面量:就是{},里面包含了表达这个具体事物的属性和方法。
    回忆:()是运算符,优先级最高;[]是数组字面量,用于创建数组;{}是对象字面量,用于创建对象。

    //1.利用字面量创建对象
    //var obj={};//创建了一个空的对象
    
    var obj = {
            uname: 'Lili',
            age: 18,
            sex: 'male',
            sayHi: function() { //匿名函数充当方法
                console.log('hi~');
    
            }
        }
        //注意点
        //(1)对象里的属性或者方法采用的是键值对的形式     键(属性名):值(属性值)
        //(2)多个属性或者方法之间用逗号隔开
        //(3)方法冒号后面跟的是一个匿名函数
    
    //2.使用对象
    //(1)调用对象的属性采取的是 对象名.属性名
    console.log(obj.uname);
    //(2)调用对象属性还有一种方法 对象名['属性名']
    console.log(obj['age']);
    //(3)调用对象的方法采取的是  对象名.方法名()  千万别忘记添加小括号
    obj.sayHi(); //hi~
    

    变量、属性、函数、方法总结:

    //1.变量和属性的相同点:都是用来存储数据的
    var num = 10;
    var obj = {
            age: 10
        }
    //不同点:
    //变量 单独声明并赋值 使用的时候直接写变量名 单独存在
    console.log(num);
    //属性 在对象里面不需要声明使用的时候必须是对象.属性
    console.log(obj.age);
    
    //2.函数和方法的相同点:都是实现某种功能 做某件事
    function fn() {
    
    }
    var obj = {
            fn: function() {
    
            }
        }
    //不同点
    //函数的单独声明并且调用的  函数名()  单独存在
    fn();
    //在对象里面 调用的时候是  对象.方法()
    obj.fn();
    

    2.2 利用new Object创建对象

    //1. 利用new Object创建对象
    var obj = new Object(); //创建了一个空的对象
    //在空对象里追加属性和方法
    obj.uname = 'Lili';
    obj.age = 18;
    obj.sex = 'male';
    obj.satHi = function() {
            console.log('hi');
        }
    //(1)利用等号赋值的方法来添加对象的属性和方法
    //(2)每个属性和方法直接用分号结束
    
    //2. 调用属性的两种方式
    console.log(obj.uanme);
    console.log(obj['sex']);
    //调用方法
    obj.sayHi();
    

    2.3 利用构造函数来创建对象

    为什么需要用到构造函数来创建对象?因为前面提到的两种创建对象的方法,一次仅仅可用创建一个对象。有时候创建很多个对象的时候,里面很多的属性和方法大量是相同的,因此考虑运用函数的方法来重复这些相同的代码。我们就把这个函数称为构造函数。换句话说:构造函数就是对象里面一些相同的属性和方法抽象出来封装到函数里。

    //语法格式
    //1.利用构造函数创建对象
    function 构造函数名() {
        this.属性 = 值;
        this.方法 = function() {
    
        }
    }
    //2.调用
    new 构造函数名();
    

    举例

    function Star(uname, age, sex) {
        this.name = uname;
        this.age = age;
        this.sex = sex;
        this.sing = function(sang) {
            console.log(sang);
    
        }
    }
    var ldh = new Star('刘德华', 18, '男');
    console.log(typeof ldh); //object
    console.log(ldh.name); //刘德华
    console.log(ldh['sex']); //男
    ldh.sing('冰雨');//冰雨
    
    //(1)构造函数名首字母要大写
    //(2)构造函数不需要return就可用返回结果
    //(3)构造函数返回的是一个对象,利用typeof可用检测出来
    //(4)构造函数与普通函数的不同之处在于:调用的时候前面多加了一个new;函数体里面属性和方法前面必须加上this;构造函数名首字母必须要大写
    

    构造函数和对象的区别:

    • 构造函数泛指一大类,相当于java语言里面的类;对象是一个特指
    • 利用构造函数创建对象的过程又称未类的实例化

    3. new关键字

    function Star(uname, age, sex) {
        this.name = uname;
        this.age = age;
        this.sing = function(sang) {
            console.log(sang);
        }
    }
    var ldh = new Star('刘德华', 18, '男');
    //new 关键字执行过程
    //1. new构造函数new Star可用在内存中创建了一个空对象
    //2. this就会指向刚才创建的空对象
    //3. 执行构造函数里面的代码 给这个空对象添加属性和方法
    //4. 返回这个对象(所以构造函数里不需要return)
    

    4. 遍历对象属性

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

    var obj = {
        name: 'pink老师',
        age: 18,
        sex: '男',
        fn: function() {}
    }
    for (var k in obj) {
        console.log(k); //k变量输出 得到的是属性名
        console.log(obj[k]); //obj[k]得到的是属性值  
    }
    
  • 相关阅读:
    电商框架
    激光推送
    requirejs的用法(二)
    requirejs(一)
    AngularJs表单验证
    angularjs学习资料
    AngularJS内置指令
    angularjs 指令详解
    ASP.NET MVC5 + EF6 入门教程 (5) Model和Entity Framework
    EF框架step by step(9)—Code First Fluent API
  • 原文地址:https://www.cnblogs.com/deer-cen/p/12041214.html
Copyright © 2020-2023  润新知