您的位置：首页 > Web前端 > JavaScript

JavaScript 面向对象概念与写法比对

2018-02-09 17:12 399 查看

面向对象的概念1.面向对象就是使用对象，面向对象开发就是使用队形开发2.面向过程就是使用过程的方式开发，面向对象是对面向过程进行封装
面向对象的特性1.抽象性2.封装性3.继承性## 抽象性所谓抽象性就是：如果对一个对象描述一个数据，需要抽取这个对象的核心数据1.提出需要的核心属性和方法2.不在特定环境想无法明确对象的具体意义
## 封装性对象是将数据与功能组合到一起，即封装1.js对象就是键值对集合 * 键值如果是数据（基本数据，复合数据，空数据），就称为属性 * 如果键值是函数，那么就称为方法2.对象就是将属性和方法封装起来3.方法是将过程封装起来## 继承性所谓继承就是自己没有，别人有，拿过来为自己所用，并称为自己的东西1.传统的继承基于模板2.JS继承基于对象
一个简单的继承模式混入（mix）function mix(o1,o2){for(var k in o2){o1[k] = o2[k];}}在jquery中将该方法命名为extend## 使用对象进项表层1. 首先看是否有内置对象，或者第三方提供

简单的案例
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script> //1.首先找对象 //2.任何操作应该交个对象完成 /* //任务需求 //1> 创建一个div标签 var div = document.createElement("div"); //2> 将div加到页面中 document.body.appendChild(div); //3> 设置div样式 div.style.border = '1px dashed red '; div.style.width = '400px'; div.style.height = '300px'; */ //面向对象的方式去思考 //1.抽取对象（名词提炼法）：div body //2.分析属性和方法（动词提炼）：加到设置样式 //需要一个div的构造函数 //初级面向对象 function DivTag(){ this.Dom = document.createElement('div'); this._jadao = function(node){ //需要将this.Dom加到node中 node.appendChild(this.Dom); }; this._styles = function(name,val){ this.Dom.style[ name ] = val; }; this.css = function(option){ for(var k in option){ this.Dom.style[ k ] = option[k]; } };
} var divTag = new DivTag(); //内部应该创建dom对象 //构造函数内部应该创建dom对象div ,同时将其设置为属性 //divTag应该具有的方法 divTag._jadao(document.body); divTag.css({ 'border':'1px dashed blue', 'width' :'400px', 'height':'300px', 'background':'pink', }); /* divTag._jadao(document.body); divTag._styles('border','1px dashed blue'); divTage._styles('width','pink'); divTage._styles('height','pink'); divTage._styles('background','pink'); */ //中级面向对象 function Div1Tag(){ this.Doms = document.createElement('div'); this.appendTo = function(node){ node.appendChild(this.Doms); return this; } this.css = function (option){ for (var k in option){ this.Doms.style[ k ] = option[k]; } return this; } } new Div1Tag().css({'border':'1px dashed green','background':'blue','width':'400px','height':'400px'}).appendTo( document.body ); </script> </html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航