JavaScript 面向对象概念与写法比对-CSDN博客

本文链接：https://blog.csdn.net/u012955038/article/details/79300357

  面向对象的概念 

  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> 