面向过程和面向对象的编程思想 复习原型 构造函数和实例对象和原型对象之间的关系
生活随笔
收集整理的這篇文章主要介紹了
面向过程和面向对象的编程思想 复习原型 构造函数和实例对象和原型对象之间的关系
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
體會面向過程和面向對象的編程思想
<!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>?
總結
以上是生活随笔為你收集整理的面向过程和面向对象的编程思想 复习原型 构造函数和实例对象和原型对象之间的关系的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 构造函数和实例对象之间的关系 构造函数创
- 下一篇： 总结三者之间的关系