博客列表 >JavaScript的构造函数和原型成员及其静态成员--2019/07/10

JavaScript的构造函数和原型成员及其静态成员--2019/07/10

LISTEN的博客
LISTEN的博客原创
2019年07月22日 16:30:22639浏览
  1. 写一个构造函数来创建对象

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>构造函数创建对象</title>
</head>
<body>
<script>
    //创建构造函数
    var CreateObj=function () {
        this.myname='php';
        this.age=20;
        this.get=function (a,b) {
            var area='中国';
            return '我的名字是:'+ a +',年龄是:'+ b +',国籍是:'+area;
        }
    };

    // 创建构造函数的实例 obj1
    var obj1=new CreateObj();
    //用实例访问
    console.log(obj1.myname);
    console.log(obj1.age);
    console.log(obj1.get(obj1.myname,obj1.age));
    console.log(obj1.get('JavaScript',22));
</script>
</body>
</html>

运行实例 »

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

运行结果:

构造函数创建对象.png


2. 向构造函数的prototype中添加成员,实现数据在实例间共享

静态成员和原型成员

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态成员与原型成员</title>
</head>
<body>
<script>
    //创建构造函数
    var CreateObj=function () {
        this.myname='php';
        this.age=20;
        this.get=function (a,b) {
            var area='中国';
            return '我的名字是:'+ a +',年龄是:'+ b +',国籍是:'+area;
        }
    };

    //创建静态成员
    CreateObj.tel='15200001234';
    CreateObj.hello=function () {
        return '欢迎来到我的国家';
    }
    //访问静态成员
    console.log('访问静态属性:'+CreateObj.tel);
    console.log('访问静态方法:'+CreateObj.hello());

    // 创建构造函数的实例 obj1
    var obj1=new CreateObj();

    //构造函数实例不能访问静态成员
    // console.log(obj1.tel);
    // console.log(obj1.hello());

    //创建原型成员 prototype`, 原型属性
    CreateObj.prototype.tel1='15200001234';
    CreateObj.prototype.hello1=function () {
        return '欢迎来到我的国家';
    }

    //用构造函数的实例 obj1 访问原型成员
    console.log('用构造函数的实例 obj1 访问原型属性:'+obj1.tel1);
    console.log('用构造函数的实例 obj1 访问原型方法:'+obj1.hello1());

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

运行实例 »

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

运行结果

js的静态成员和原型成员.png

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