# 认识面向对象
1. 一切事物皆对象
2. 对象具有封装和继承性
3. 信息隐藏
## 基本面向对象
~~~
<script>
// 定义一个基本的对象
var parson = {
name:"rose",
age:25,
eat:function(){ // 对象eat方法
alert('eat');
}
};
console.log(parson);
</script>
~~~
## 函数构造器构造对象
~~~
<script>
function person(){
}
person.prototype = {
name : "rose",
age : 25,
eat : function (){
console.log("from function obj");
return true;
}
};
var oPerson = new person(); // 创建对象
console.log(oPerson.age); // 调用对象属性
console.log(oPerson.name);
console.log(oPerson.eat()); // 调用对象方法
</script>
~~~
## 深入JavaScript面向对象
~~~
<script type="text/javascript">
function people(){
}
people.prototype.say = function (){
console.log("hello!");
}
function student(){
}
student.prototype = new people(); // 通过new对象的方式 使得student类继承自people
var s = new student();
s.say(); // hello! 继承自父类方法成功
student.prototype.say = function (){
console.log('stu say hello!');
}
var s = new student();
s.say(); // stu say hello! 父类方法被复写了
</script>
~~~
那如何在子类中调用父类呢?
~~~
<script type="text/javascript">
function people(){
}
people.prototype.say = function (){
console.log("hello!");
}
function student(){
}
student.prototype = new people(); // 通过new对象的方式 使得student类继承自people
var s = new student();
s.say(); // hello! 继承自父类方法成功
var superSay = student.prototype.say; // 将父类的方法赋值给变量
student.prototype.say = function (){
superSay.call(this); // 调用call方法
console.log('stu say hello!');
}
var s = new student();
s.say(); // stu say hello! 父类方法被复写了
</script>
~~~
## 另外 闭包
~~~
<script type="text/javascript">
(function(){
function people(name){ // 传递参数
this.name = name;
}
people.prototype.say = function (){
console.log("hello!"+ this.name);
}
window.people = people;
}());
(function(){
function student(name){ // 传递参数
this.name = name;
}
student.prototype = new people(); // 通过new对象的方式 使得student类继承自people
var superSay = student.prototype.say; // 将父类的方法赋值给变量
student.prototype.say = function (){
superSay.call(this); // 调用方法
console.log('stu say hello!'+this.name);
}
window.student = student;
}());
var s = new student('rose');
s.say(); // stu say hello! 父类方法被复写了
// 最后结果打印了 hello!rose | stu say hello!rose
</script>
~~~
- 空白目录
- JavaScript保留字
- JS事件
- JS面向对象
- JS内置对象
- 自定义对象
- String 字符串对象
- Date 日期时间对象
- Array 数组对象
- Math 对象
- DOM对象控制HTML
- getElementsByName
- getElementsByTagName
- getAttribute 获取元素属性
- setAttribute 设置元素属性
- childNodes 访问子节点
- parentNode 访问父节点
- createElement 创建元素节点
- createTextNode 创建文本节点
- insertBefore 插入节点
- removeChild 删除节点
- offsetHeight 网页高度
- scrollHeight 网页高度
- JS浏览器对象
- window对象
- 计时器
- history对象
- location对象
- screen对象
- navigator对象
- 弹出窗口
- cookies