体会面向过程和面向对象的编程思想
<!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>
