您的位置：首页 > Web前端 > JavaScript

原生js面向对象基本思想及介绍

2015-01-23 23:24 423 查看

今天学习了js面向对象，勉强算是面向对象吧，首先比较js是基于对象的饿，要想高级语言（java和。net）那样完全面向对象是不可能的，因为面向对象的三大特征，封装，继承，多肽，但在js不存在多肽，因为如果在同一个js文件中定义2个方法名相同的方法，不论参数个数，参数类型（js中参数不存在类型），是否相同，浏览器从上到先解析js文件（htnl文件），会已最后一个方法为准，最后一个方法（函数）会掩盖之前所有的同名的方法，

现在主要介绍一些js面向对象的思想，首先定义对象，js中定义对象，实际上就是定义一个方法，用关键字function定义，和一般的方法（函数）的定义没有什么区别，只是在调用的时候，如果是直接掉用就是方法（函数）的执行，如果通过var 定义一个变量（这里说成对象更合理）然后在通过关键字new 去生成对象，那这就是js创建对象，还有一点的区别是，虽然，对象和方法都是通过function定义，但是一般的方法都只是功能代码的封装，但如果定义的是对象，里面就主要是属性的封装，已经与属性相关的一些方法，要么就是一个空方法（对象），然后可以动态的创建属性和方法，比如，创建一个学生对象，里面有2个属性，一个姓名（name），一个年龄（age），那么在定义这个对象的时候就可以吧这2个把这2个属性直接定义为该对象的属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js对象</title>
<script type="text/javascript">
//定义一个自带属性的对象
function Student(_name,_age){
this.name=_name
this.age=_age;
this.getName=function(){return this.name;}
this.setName=function(_name){this.name=_name;}
}
//定义一个没有属性的对象
function _student(){}
window.onload=function(){
var studs=new Array();//定义一个集合（数组）
var student1=new Student();//创建对象
student1.setName('张三');//通过方法赋值
student1.age=23;//通过属性赋值
var student2=new Student('李四',25);//创建对象（通过参数赋值）
var student3=new Student('王五',25);//创建对象（通过参数赋值）
var _student1=new _student()//创建一个没有属性的对象
_student1.sex='男';//动态的创建属性并赋值
_student1.belong1='属性1'//动态的创建属性并赋值
_student1.belong2='属21'//动态的创建属性并赋值
studs[0]=student1;//吧对象添加到集合
studs[1]=student2;//吧对象添加到集合
studs[2]=student3;//吧对象添加到集合
var info='这是通过对象读取信息：<br/>'
for(var i=0;i<studs.length;i++){
info+='姓名：'+studs[i].name+' 年龄：'+studs[i].age+' getName方法：'+studs[i].getName()+'<br/>';
}
document.getElementById('content').innerHTML=info;
document.getElementById('content1').innerHTML="动态属性数据：<br/>_student1.sex:"+_student1.sex+"_student1.belong1:"+_student1.belong1+"_student1.belong2:"+_student1.belong2;

}
</script>
</head>
<body>
<div id="content"></div>
<div id="content1"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航