体会面向过程和面向对象的编程思想
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.1.js"></script>
<style>
div {
width: 400px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv"></div>
<script>
// 点击按钮,改变div的背景颜色
// document.getElementById("btn").onclick = function(){
// document.getElementById("dv").style.backgroundColor = "yellow";
// };
// 面向对象思想----初级的
// 按钮是一个对象,div是一个对象,颜色是一个属性
// function ChangeStyle(btnId,dvId,color){
// // 按钮对象
// this.btnObj = document.getElementById(btnId);
// // div对象
// this.dvObj = document.getElementById(dvId);
// // 颜色
// this.color = color;
// }
// // 数据共享来改变背景颜色
// ChangeStyle.prototype.init = function(){
// // 就是实例对象----就是当前对象
// // console.log(this);
// var that = this;
// // 点击按钮,改变div的背景颜色
// this.btnObj.onclick = function(){
// that.dvObj.style.backgroundColor = that.color;
// };
// };
// 实例化对象
// var cs = new ChangeStyle("btn","dv","yellow");
// cs.init();
// function Person(){
// this.sayHi = function(){
// console.log(this);
// };
// }
// var p = new Person();
// p.sayHi();
</script>
<script>
function ChangeStyle(btnObj,dvObj,json){
this.btnObj = btnObj;
this.dvObj = dvObj;
this.json = json;
}
ChangeStyle.prototype.init = function(){
// 点击按钮,改变div多个样式属性值
var that = this;
this.btnObj.onclick = function(){
for(var key in that.json){
that.dvObj.style[key] = that.json[key];
}
};
};
// 实例化对象
var json = {
"widht":"500px",
"height":"800px",
"backgroundColor":"blue",
"opacity":"0.2"
};
var cs = new ChangeStyle($("#btn")[0],$("#dv")[0],json);
// 调用方法
cs.init();
// 点击p标签,设置div的样式
</script>
</body>
</html>
复习原型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 构造函数
function Person(sex,age){
this.sex = sex;
this.age = age;
}
// 通过原型添加方法
Person.prototype.sayHi = function(){
console.log("打招呼,您好");
};
var per = new Person("男",20);
// 实例对象
console.log(per.__proto__.constructor==Person.prototype.constructor);
var per2 = new Person("女",29);
console.log(per.sayHi==per2.sayHi);
// 构造函数的名字
// console.dir(Person);
// 实例对象中有两个属性(这两个属性是通过构造函数来获取的)
// __proto__这个属性
// 构造函数中并没有sex和age的两个属性
/**
* 实例对象中有个属性,__proto__,也是对象,叫原型,不是标准的属性
* 浏览器使用的
* 构造函数中有一个属性,prototype,也是对象,叫原型
* 是标准属性,程序员使用
*
* 原型---->__proto__或者是prototype,都是原型对象,
* 原型的作用:共享数据,节省内存空间
*/
</script>
</head>
<body>
</body>
</html>
构造函数和实例对象和原型对象之间的关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 通过构造函数实例对象,并初始化
// var arr = new Array(10,20,30,40);
// // var per = new Person("小明",20,"男");
// // join是方法,实例对象调用的方法
// arr.join("|");
// console.dir(arr);
// // join方法在实例对象__proto__原型
// console.log(arr.__proto__==Array.prototype);
</script>
<script>
// 原型的作用之一:共享数据,节省内存空间
// 构造函数
function Person(age,sex){
this.age = age;
this.sex = sex;
}
// 通过构造函数的原型添加一个方法
Person.prototype.eat = function(){
console.log("明天中午吃完饭就要演讲");
};
var per = new Person(20,"男");
// per.eat();
per.__proto__.eat();
// 构造函数,原型对象,实例对象之间的关系
console.dir(Person);
// console.dir(per);
</script>
</head>
<body>
</body>
</html>