博客列表 >JavaScript第一课:JS基本语法,对象创建的三种方法和区别 2018年9月11日 22:28

JavaScript第一课:JS基本语法,对象创建的三种方法和区别 2018年9月11日 22:28

南通税企通马主任的博客
南通税企通马主任的博客原创
2018年09月13日 17:21:12621浏览

作业:创建对象的方式(字面量或构造函数)

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS中的对象创建</title>
</head>
<body>
<h2>用字面量创建对象</h2>
<hr>
<script >
let obj = 100;
let obj1 = '南通税企通';
document.write(obj1,'<br>',obj,'<hr>');

let obj2 = {
    name:'arthur',
    position:'管理员',
    salary:19800,
    secret: function () {
        return this.salary;
    }
};
document.write(obj2.name,'<br>');
document.write(obj2.position,'<br>');
document.write(obj2.secret(),'<hr>');
</script>

<h2>用构造函数创建对象</h2>
<hr>
<script>
    function Staff(name,position,salary){
        this.name = name;
        this.position = position;
        this.salary = salary;
        this.getName = function () {
            return [this.name,this.position,this.salary];
        }
    }
    let staff1 = new Staff('arthur','admin',19800);
    let staff2 = new Staff('kitty','assistant',8800);
    document.write(staff1.getName(),'<br>');
    document.write(staff2.getName(),'<hr>');

    document.write(typeof staff1.constructor,'<br>');
    document.write(staff1.constructor,'<br>');
    document.write(staff1.constructor === Staff,'<br>');
    document.write(staff1 instanceof Staff,'<br>');
    document.write(staff1 instanceof Object,'<hr>');

    document.write(this,'<br>');
    Staff('baby','desktop','3800');
    document.write(window.getName(),'<hr>');

    staff3 = new Staff();
    Staff.call(staff3,'a','a1','123');
    document.write(staff3.getName(),'<br>');
    Staff.apply(staff3,['b','b2',321]);
    document.write(staff3.getName(),'<hr>');
</script>

<h2>原型模式创建对象</h2>
<hr>
<script >
    function Shop(shoes,clothes,jeans) {
        Shop.prototype.shoes = shoes;
        Shop.prototype.clothes = clothes;
        Shop.prototype.jeans = jeans;
        Shop.prototype.getInfo = function () {
            return this.shoes +',' +this.clothes +','+ this.jeans;
        }
    }
    let shop1 = new Shop('李宁','班尼路','某易斯.威登');
    document.write(shop1.getInfo(),'<br>');
    let shop2 = new Shop('乔丹','李维斯','某思哲');
    document.write(shop1.getInfo(),'<br>');
    document.write(shop2.getInfo(),'<hr>');

    document.write(Shop.constructor,'<br>');
    document.write(typeof Shop.prototype,'<br>');
    document.write(Shop.prototype.constructor,'<hr>');

    document.write(Shop.constructor === shop1.constructor.prototype.constructor);

</script>
</body>
</html>

运行实例 »

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

总结:写完了,终于把JS中对象了解到一定程度了,所谓的一切皆对象,就说明了一切皆虚幻,存在于自己怎么理解而已!


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