理解JS面向对象

最新推荐文章于 2024-08-14 20:37:21 发布

wming3

最新推荐文章于 2024-08-14 20:37:21 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签： javascript 面向对象

本文链接：https://blog.csdn.net/u010187139/article/details/47017543

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

js中面向对象和纯面向对象语言中的对象是不同的, js中的对象是: 无序属性的集合, 其属性可以包含基本值 ,对象或者函数.

js可以像java一样写代码, 能够面向对象编程. 在js中每一个function其实就是个对象. 可以基于Object对象创建, 还可以基于对象字面量方式

一基于函数创建对象

1. 定义对象

function Load(){
   console.log('我是一个方法也是一个对象 我叫: Load');
}
console.log('---产生一个对象---');
var obj = new Load();

上面的程序在浏览器运行之后在控制台会显示出来结果是:

—产生一个对象—
我是一个方法也是一个对象我叫: Load

2. 给对象添加实例方法和属性

使用 prototype原型关键字添加的是公共的,可以理解是pubic类型的

格式:有点像json的感觉, 注: 参数列表直接写变量名如 aa 不要加var 如var aa 这样就错了.

对象名称.prototype = {
    属性名 : 属性值,
    方法名 : function(参数列表) {
        方法体;
    }
}

Load.prototype = {
    sex:'女',
    address:'河南新乡',
    fun1:function(){
        console.log('这个fun1是Load对象的公共方法');
    }
};
console.log('---输出类的公共的方法和属性---');
obj.fun1();
console.log('obj 中 sex 是: ' + obj.sex + '; obj 中 address 是: '+ obj.address);

结果是：

—输出类的公共的方法和属性—
这个fun1是Load对象的公共方法
obj 中 sex 是: 女; obj 中 address 是: 河南新乡

３. 给对象添加静态方法和属性

直接使用类名定义, 必须用类名调用使用对象调用会报错

//添加静态属性和方法
Load.staticName = 'load name is wangming staic';
Load.static1 = function(){
      console.log('this is load method static')
};
console.log('---输出Load类的静态方法和静态属性, 和java相似,必须用类名调用---');
console.log(Load.staticName);
Load.static1();

结果:

—输出Load类的静态方法和静态属性, 和java相似,必须用类名调用—
object.html:43 load name is wangming staic
object.html:35 this is load method static

4. 对象添加私有属性和方法

直接在对象定义的属性和方法就是私有的.

function Load(){
    console.log('我是一个方法也是一个对象 我叫: Load');

    //添加私有的属性和方法
    var privateProto = '我是一个Load中的私有的属性';
    this.publicFun1 = function(){  //对外提供共有的方法,可用于输出对象中的私有属性值
        console.log('对象Load的私有属性privateProto 是: ' + privateProto);
    };
    function privateFun2(){
        console.log('我是Load中的第二个私有的方法 我叫 privateFun2');
    }
    privateFun2();  //私有属性
}

console.log('---输出类的私有的方法和属性---');
obj.publicFun1();
//obj.privateFun2();    //不能调用私有的方法  js会提示错误
console.log(obj.privateProto);  //不能调用私有的成员属性 所以是为: undefined

结果是:

—输出类的私有的方法和属性—
对象Load的私有属性privateProto 是: 我是一个Load中的私有的属性
undefined

全部的代码为

<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">
    //Load方法也可以是对象
    function Load(){
        console.log('我是一个方法也是一个对象 我叫: Load');

        //添加私有的属性和方法
        var privateProto = '我是一个Load中的私有的属性';
        this.publicFun1 = function(){  //对外提供共有的方法,可用于输出对象中的私有属性值
            console.log('对象Load的私有属性privateProto 是: ' + privateProto);
        };
        function privateFun2(){
            console.log('我是Load中的第二个私有的方法 我叫 privateFun2');
        }
        privateFun2();  //私有属性
    }

    //给对象添加实例方法和属性 使用 prototype原型关键字
    Load.prototype = {
        sex:'女',
        address:'河南新乡',
        fun1:function(){
            console.log('这个fun1是Load对象的公共方法');
        }
    };

    //添加静态属性和方法
    Load.staticName = 'load name is wangming staic';
    Load.static1 = function(){
          console.log('this is load method static')
    };

    //测试方法
    function test(){
        console.log('---产生一个对象---');
        var obj = new Load();
        console.log('---输出Load类的静态方法和静态属性, 和java相似,必须用类名调用---');
        console.log(Load.staticName);
        Load.static1();
        console.log('---输出类的公共的方法和属性---');
        obj.fun1();
        console.log('obj 中 sex 是: ' + obj.sex + '; obj 中 address 是: '+ obj.address);
        console.log('---输出类的私有的方法和属性---');
        obj.publicFun1();
//        obj.privateFun2();    //不能调用私有的方法  js会提示错误
        console.log(obj.privateProto);  //不能调用私有的成员属性 所以是为: undefined
    }
    window.onload = test();
</script>
</body>
</html>

注: 打开浏览器的控制台, 按F12键
这里写图片描述

二基于Object对象

var person = new Object();
person.name = 'My Name';
person.age = 18;
person.getName = function(){
    return this.name;
};
console.log(person.getName()); //My Name
console.log(person.age);    //18
console.log(person.name);   //My Name

三基于对象字面量方式（比较清楚的查找对象包含的属性及方法）

var person = {
    name : 'My name',
    age : 18,
    getName : function(){
        return this.name;
    }
}

以上三种方式都可以使用 ‘.’ 操作符来动态的添加属性, 可以使用delete操作符将属性设置为 undefined 来删除属性

person.newAtt= 'new Attr';//添加属性
console.log(person.newAtt);//new Attr
delete person.age;
console.log(person.age);//undefined(删除属性后值为undefined);

参考 http://www.cnblogs.com/gaojun/archive/2013/10/24/3386552.html
参考 http://www.cnblogs.com/keke/archive/2010/08/17/1801363.html

wming3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
理解JS面向对象

大多数的人写js都是想到什么就写什么, 就是一个接一个的function函数, 遇到问题有时候还要copy. js可以像java一样写代码, 能够面向对象编程. 在js中每一个function其实就是个对象.1. 定义对象function Load(){ console.log('我是一个方法也是一个对象我叫: Load');}console.log('---产生一个对象---
复制链接

扫一扫