js面向对象总结

1、字面量表示如何表达这个值，一般除去表达式，给变量赋值时，等号右边都可以认为是字面量。
字面量分为字符串字面量(string literal )、数组字面量(array literal)和对象字面量(object literal)，另外还有函数字面量(function literal)。
示例：
var test="hello world!";
"hello world!"就是字符串字面量，test是变量名。

2、函数声明 (声明前可以调用)

function add(a,b){
   return a+b;
}
add(3,4);//7

add(3,4);//7
function add(a,b){
return a+b;
}

     函数表达式

var add1=function (a,b){return a+b;};
add1(2,5);//7

    add1(2,5);// TypeError
    var add1=function (a,b){return a+b;};　　

3、首先理解什么叫对象：一切皆对象（原始值+对象）

js的数据类型：原始值+对象

原始值：Boolean、string、number、null、underfind

对象：object、Array

4、创建对象的方式（new  字面量 构造函数）

1）通过new关键字

var obj=new Object();
obj.name=name;
obj.age=age;
obj.todo=function(){
}

2）通过对象字面量

1、简单字面量
var obj2={};                         
obj2.name='ben';
obj2.todo=function(){
　　return this.name;
}

2、嵌套字面量
var obj3={
  name:'zhangsan',                             Key    在有空格、连接符、关键字、保留字要用引号
  age:20,                                      value  有引号是字符串 
  todo:functon(){
     this.name;
   }
}

3）构造函数（用于复用的公共的方法）

function Person(name,age){
 　 this.name=name;                             //this指向实例化对象aaa
    this.age = age;
    this.todo=function(){
　　　　return this.name;
           }
}　
var aaa = new Person("zhangsan",20);
var aaa = new Person("zhangsan",25);
aaa.name;//"zhangsan"
bbb.age;//25

普通函数

function personName(name,age){
   return name;
}
person('qing',30);//"qing"　

构造函数与普通函数区别：

1、this指向：构造函数指向创建的对象实例，普通this指函数的调用者

2.  调用方式：构造函数 ：new

3、命名方式：构造函数：首字母大小 ，普通：驼峰

实例：点击出现弹窗

普通函数方式：

    $(function() {
        //移入显示查看，反之隐藏
       $(".content .list-b").hover(function() {
         $(this).find(".see").show();
         },function() {
         $(this).find(".see").hide();
         });
         //单击查看显示弹层
         $(".see").click(function() {
         $(".bg, .popupbox").show();
         //$(".bg").show();
         });
         //单击取消/关闭隐藏弹层
         $(".btn3, .cancel").click(function() {
         $(".bg, .popupbox").hide();
         //$(".bg").show();
         });
         popup();
         function popup() {
         var box = $(".popupbox");
         var _width = document.body.clientWidth;
         var _height = document.body.clientHeight;
         var $width = (_width-box.width())/2;
         var $height =(_height-box.height())/2;
         box.css({'left':$width,'top':$height});
         };
    })

　　面向对象  创建字面量方法：首先创建一个对象，对象里面有bind()、popup()方法，但是方法多，就初始化一个init()方法嵌套字面量,用this.bind()调用.最后只调用obj.init()。

 var obj={
        init:function(){
            this.bind();
            this.popup();
        },
        bind:function(){
            //移入显示查看，反之隐藏
         $(".content .list-b").hover(function() {
          $(this).find(".see").show();
         },function() {
         $(this).find(".see").hide();
         });
         //单击查看显示弹层
         $(".see").click(function() {
         $(".bg, .popupbox").show();
         //$(".bg").show();
         });
         //单击取消/关闭隐藏弹层
         $(".btn3, .cancel").click(function() {
         $(".bg, .popupbox").hide();
         //$(".bg").show();
         });
        },
        popup:function(){
            var box = $(".popupbox");
         var _width = document.body.clientWidth;
         var _height = document.body.clientHeight;
         var $width = (_width-box.width())/2;
         var $height =(_height-box.height())/2;
         box.css({'left':$width,'top':$height});
        }
    }
    $(function(){
       obj.init();
    })

　　

工厂模式

function person(name,age){
      var obj= new Object();
	  obj.name = name;
	  obj.age =age;
  	  return obj;
}
var a1=person('qing',33);
a1.name;//"qing"

　　

　　

4、面向对象用法