博客列表 >JS对象概念、构造函数、原型属性的理解-2019/7/11

JS对象概念、构造函数、原型属性的理解-2019/7/11

降落伞的博客
降落伞的博客原创
2019年07月11日 16:26:21655浏览

练习所有老师的代码,加上自己的备注和理解。(控制台输出都正确)

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS对象</title>
</head>
<body>
<script>
    /*一、JS对象*/
    var who = '李彦宏'; /*这是一个全局变量*/
    /*这是一个全局函数*/
    function baidu(value) {
        var site = '真帅 ';
        return value + site ;
    }
    /*函数调用*/
    console.log( baidu(who) );  /*调用baidu这个函数,传的参数是一个全局变量who*/
    /*最终输出 李彦宏真帅*/

    /*函数表达式 是将定义函数时,不赋名,直接把函数赋给一个变量。此时可以把函数理解成一种数据类型*/
    var wang = function (value) {
        var site = '真帅 ';
        return value + site ;
    }
    console.log( wang('王嘉尔') );/*调用wang这个函数,传的参数是一个字符串*/
    /*最终输出 王嘉尔真帅*/
    var X = 'jackson';
    console.log( wang(X) );/*调用wang这个函数,传的参数是一个全局变量X*/

    /*全局变量,全局函数尽量少用,容易冲突,所以可以考虑用对象来封装全局成员(全局变量、全局函数)*/
    var star = {};/*可以理解为创建了一个空对象*/
    star.xingge = '开朗'; /*对象的属性*/
    star.xingwei = function (value) { /*对象的函数 理解为方法*/
        var site = '大方';
        return value + site;
    }
    console.log(star.xingge);/*输出对象的属性*/
    console.log(star.xingwei(star.xingge)); /*调用对象的方法,传的参数可以是对象的属性*/

    /*可以直接将属性和方法写到对象中*/
    var star1 = {
        /*属性与值之间 用冒号分开*/
        /*最后不用分号*/
        xingge:'幽默',
        xingwei:function (value) {
            var site = '搞笑';
            return value + site;
        }
    };

    console.log(star1.xingge);
    console.log(star1.xingwei(star1.xingge));
    /*在对象中 添加属性属性和方法,减少了全局成员的数量,针对对象进行管理也会方便很多*/

    /*如何实现代码的复用?利用函数的返回值来实现,可以是任意类型的返回值*/
    var star2 = function () {
        /*返回一个对象*/
        return{
            xingge:'温柔',
            xingwei:function (value) {
                var site = '优雅';
                return value + site;
            }
        }
    }
    /*star2这个函数,返回的是一个对象*/
    var star3=star2();  /*这样可以创建一个对象star3, 它的属性和方法就是star2 中的所定义的*/
    console.log(star3.xingge); /*输出star3的属性,也就是star2中定义的属性*/
    console.log(star3.xingwei(star3.xingge)); /*调用star3的方法,也就是star2中定义的方法,传的参数可以是star3的属性*/

    /*通过以上代码,可以看到star3的属性和方法都来自star2,
    * 但在实际项目中,代码很复杂,不会这么容易看出来,那么怎么快速知道一个对象的属性和方法来自谁呢?
    * 这就要通过构造函数了,构造函数可以理解为对象的祖宗,所有对象都是它的后代*/

    /*创建一个构造函数*/
    var star4 = function () {
        /*可以理解成 这里有一个this变量的声明 var this = null*/
        /*this`代表通过该函数创建的新对象*/
        this.xingge = '成熟';
        this.xingwei = function (value) {
            var site = '稳重';
            return value + site;
        }
        /*可以理解成 这里有一个返回语句 return this*/
    }
    /*构造函数的执行就是不断地将其属性和方法 赋给新的对象this,赋值时必须使用new关键字*/
    var star5 = new star4(); /*通过构造函数4 创建一个新对象star5 ,这个star5 可以理解成构造函数的实例/类实例*/
    console.log( star5.xingge );
    console.log( star5.xingwei(star5.xingge) );

    var star6 = new star4(); /*通过构造函数4 创建一个新对象star5 ,这个star5 可以理解成构造函数的实例/类实例*/
    console.log( star6.xingge );
    console.log( star6.xingwei(star6.xingge) );
    /*这样就可以很快地创建出一个对象了*/
    console.log( star5 instanceof star4 ); /*判断star5 是不是 star4 创建出来的,结果为true*/

    /*注意,star5 和 star6 之间没有任何关系。修改了star5的属性,star6不会受影响*/
    star5.xingge = '亲切';
    console.log(star5.xingge);   // 亲切
    console.log(star6.xingge);   // 成熟

    /*如果项目业务并不复杂,不需要通过创建实例的方式来赋予新的属性和方法
    * 既然函数也是对象,就可以拥有属性和方法,所以我们直接将属性和方法添加到构造函数上*/
    star4.sex = '男';
    star4.hobby = function () {
        return '运动';
    }
    console.log(star4.sex  );
    console.log(star4.hobby());
    /*直接在构造函数上定义的,是静态属性 、静态方法。
    * 只能使用构造函数访问,不能通过实例访问*/

    /*若想在不破坏之前构造函数的代码前提下,修改构造函数某些属性和方法,但想被其他实例使用,可以通过原型属性prototype
     * 任何函数都有一个prototype原型属性,该属性的值是一个对象,可以对其添加属性和方法*/
    star4.prototype.sex = '女';
    star4.prototype.hobby = function () {
        return '唱歌';
    }
    console.log(star5.sex);
    console.log(star5.hobby());

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

运行实例 »

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


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