博客列表 >创建对象的方式0911

创建对象的方式0911

郭稳重啊的博客
郭稳重啊的博客原创
2018年09月13日 17:29:48655浏览

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>

运行实例 »

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




声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议