面向过程和面向对象的编程思想复习原型构造函数和实例对象和原型对象之间的关系

体会面向过程和面向对象的编程思想

<!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>

面向过程和面向对象的编程思想复习原型构造函数和实例对象和原型对象之间的关系相关推荐

面向过程和面向对象的设计思想、java类、Java类的定义、java对象、对象的创建和使用、类和对象、变量分类、方法分类、构造方法、方法的重载
1.面向过程和面向对象的设计思想面向过程:procedure oriented programming 缩写 POP. 分析出解决问题所需要的步骤,然后把步骤一步一步实现. 面向过程直接关注流程. ...
Java 从面向过程走向面向对象的程序设计思想
什么是面向过程?面向对象? 它们都是解决问题的思路我用一个生活的例子来区别它们: 起床,洗漱,吃饭--等这些都是生活中的事吃饭:我们想吃饭之前要做饭,饭菜可以是自己做,或者爸妈做,也可以下馆子面 ...
面向过程与面向对象的程序设计思想
面向过程:"面向过程"是一种以事件为中心的编程思想.分析出解决问题所需要的步骤,然后用函数把这些步骤一步步实现,使用的时候一个个一次调用就行了. 面向对象:"面向对象&q ...
学习Java第一天：1、Java是什么？2、面向对象的编程思想的特点 3、Java的开发工具 4、安装JDK和配置环境变量 5、Java程序的运行过程 6、Java语言的特点
目录 1.Java是什么? 2.面向对象的编程思想的特点 3.Java的开发工具 4.安装JDK和配置环境变量 5.Java程序的运行过程 6.Java语言的特点 1.Java是什么? java是一门 ...
面向过程 VS 面向对象
面向过程(Process Oriented)这个词是在面向对象(Object Oriented)出现之后为与之相对而提出的.其实它在以前基本被叫做"结构化编程". 早期的程序设计, ...
面向过程与面向对象——编程思想的演变
编程语言从无到有,据维基百科统计,至今为止有600多种.如此众多语言,需要逐个学习吗?实际上编程语言都是相通的,编程语言只需要精通一门即可,其他都能融会贯通.比如Java与C++就差不多,Java和C ...
从面向过程到面向对象编程的思想转变
项目的需求,要实现一个功能:更新表中若干行的部分列数据.Are you 明白大概要实现什么功能了吗? 嗯,我知道你明白了.那就接着往下看把. 遇到这样的问题,我相信很多人首先想到的方法是直接使用upd ...
面向过程与面向对象编程的区别和优缺点
■面向过程与面向对象编程的区别转载至:https://www.cnblogs.com/strivers/p/6681876.html 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步 ...
[python]两种编程思维--面向过程和面向对象
例如:eg:炒一份西红柿鸡蛋一.面向过程面向过程的编程思维,如下二.面向对象制作一台炒菜机器人,然后告诉机器人做一道西红柿炒鸡蛋.在这里,我们直接面对的是机器人,而非炒菜的过程,所以这里机器人 ...

面向过程和面向对象的编程思想复习原型构造函数和实例对象和原型对象之间的关系

面向过程和面向对象的编程思想复习原型构造函数和实例对象和原型对象之间的关系相关推荐

最新文章

热门文章

面向过程和面向对象的编程思想 复习原型 构造函数和实例对象和原型对象之间的关系

面向过程和面向对象的编程思想 复习原型 构造函数和实例对象和原型对象之间的关系相关推荐

最新文章

热门文章

面向过程和面向对象的编程思想复习原型构造函数和实例对象和原型对象之间的关系

面向过程和面向对象的编程思想复习原型构造函数和实例对象和原型对象之间的关系相关推荐