Blogger Information
Blog 40
fans 1
comment 0
visits 31969
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
创建对象的方式0911
郭稳重啊的博客
Original
656 people have browsed it

0911作业

实例

<meta charset="UTF-8">
<title>编程: 创建对象的方式(字面量或构造函数)</title>
<script>
    //字面量创造对象
    var person1= {};
    person1.name = '杨过';
    person1.age = 18;
    person1.sex= '男';
    person1.salary=5000;
    person1.story = function(){
        return this.name+ "喜欢上了小龙女";
    }
    //访问成员
    console.log(person1.name); //属性
    console.log(person1.age);
    console.log(person1.sex);
    console.log(person1.salary);
    console.log(person1.story());
    console.log(Object.getOwnPropertyDescriptor(person1,'name')); //单个属性
    console.log(Object.getOwnPropertyDescriptors(person1));    // 全部属性

    var person= {
        name : "小龙女",
        age : 58,
        sex:'女',
        salary:6000,
        story:function(){
            return this.name+ "喜欢上了杨过";
        }
    }
    //访问成员
    console.log(person.name); //属性
    console.log(person.age);
    console.log(person.sex);
    console.log(person.salary);
    console.log(person.story());
    console.log(Object.getOwnPropertyDescriptor(person,'age')); //单个属性
    console.log(Object.getOwnPropertyDescriptors(person));    // 全部属性

    //构造函数创建对象
    function Per(name,age,sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.getName = function () {
            return this.name;
        }
    }

    let per1 = new Per('张无忌',25,'男');//此时this指向per1,new关键字可以改变this指向,
    // 其实虽然this指向per1,但是相当于new per将数据/属性复制了一份到per1里面,虽然this指向改变了,但是属性其实还是Per里面的数据
    let per2 = new Per('黄蓉',20,'女');
    console.log(per1.getName());
    console.log(per2.getName());

   //新生成的per1/per2对象都有一个属性construct,它的值就是构造函数
    console.log(typeof per1.constructor);   //construct属性类型是函数:function
    console.log(per1.constructor);  // 查看属性,发现与Per()一致
    console.log(per1.constructor === Per);  //验证是否完全一致
    console.log(per1 instanceof Per);   // 验证per1是否是Per构造函数的实例
    console.log(per1 instanceof Object);   // 其实所有对象都是Object的实例

    //构造函数本质上仍是函数,完全可以当普通函数来调用
    console.log(this); // 查看当前this,即作用域是什么? 此时this指向全局作用域中的window对象
    Per('西门大官人',26,'男'); // 相当于给window对象添加属性和方法
    console.log(window.getName());  //调用原构造函数中的方法,注意调用者是window

    //apply()与call()传参方式不同,一个是字符串,一个是数组
    per3 = new Per();//此时this指向per3
    Per.call( per3,'周伯通',60,'男');
    console.log(per3.getName());
    Per.apply(per3,['周芷若',22,'女']);
    console.log(per3.getName());

    function Animal(name) {
        this.name = name;
        //而在构造函数内部,只要设置属性对外部全局函数的一个引用即可
        this.getName = getName;
    }
    //函数定义在全局,内部的this,由函数的调用者确定
    function getName() {
        return this.name;
    }
    //实例化Animal,创建实例
    dog = new Animal('狗');
    cat = new Animal('喵');
    //使用Animal的实例dog,访问其方法getName,此时getName()函数内的this作用域就是dog对象
    console.log(dog.getName());
    //原理同上,这样就实现了dog和cat对象共享了一个全局函数做为方法
    console.log(cat.getName());
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例




Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post