学习目标:
1、掌握JS中的类(原型对象)和对象。2、什么是成员变量和成员方法。3、掌握构造方法的使用。
补充:关于双等号(==):
1、如果等号两边都是字符串时,则比较内容是否相等
2、如果等号两边是数字时,则比较数值大小是否相等
3、如果等号两边是对象或者对象的函数,则比较地址是否相等(即判断两者是否引用的同一对象)
        function Person(){
        }
        var p1=new Person();
        var p2=new Person();
        alert(p1==p2);//这里结果是false,因为地址不相等
        var p3=p2;
        alert(p3==p2);//这里是true
 
 
javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象!
var a=123;
window.alert(a.constructor);//这里会打出a的构造函数是Number
var b='abc';
//同样能打出来b的构造函数是String
function Person(){}
window.alert(Person.constructor);
//这里能打印出Person的构造函数是 function Function(){}
 
从上面可以看出,javascript中所有的东西都是对象!!!
 
 
基于对象和面向对象实际上都是以对象的概念来编写程序,从本质上讲没有区别。javascript中没有class(类),所以有人把类叫作原型对象,因为两个概念从在编程中发挥的作用看都是一个意思。
 
//定义一个类(原型对象)
function Cat(){
 
}
//看起来和函数一样的,主要是看怎么去用
Cat();//这样用,它就是一个函数
var cat1 = new Cat();//这里cat1就是一个对象(实例)了;
//定义这个对象的属性
cat1.name="小白";
cat1.age=3;
cat1.color="白色";
//从上面可以看出:
//1、JS中的对象的属性可以动态的添加
//2、属性没有限制
 
例:
function test(){
    alert(this.v);
}
var v=90;
//函数默认都是属于window对象的,window是默认的对象,所以可以不打
window.test();//这里输出为90,因为函数 是在var后面才调用的
 
 
关于用var定义和不用var定义变量的区别例:
        //在函数外面用var和不用都可以
        var abc=89;
        function test(){
            //在函数里面,不用var,则表示用全局的abc(即外面的)
            //用了var 则表示在test()函数中定义一个新的变量
            abc=900;
        }
        alert(abc);
 
访问对象的属性有两种方法:
1、普通方式
        对象名.属性名
2、动态访问
        对象名['属性名']
    例:
        function Person(){}//定义一个类
        var p1=new Person();//创建一个对象
        p1.name="qqzone";//给对象的name属性赋值
        alert(p1.name);//这里是普通方式访问
        alert(p1['name']);//这里是动态方式访问
        var val = 'qq'+'zone';
        alert(p1[val]);//这里就体现出动态的好处了,属性名可以是字符串拼接出来的
 
JS中对象的传值是引用方式var a=new Person();
a.name="test1";
var b=a;//把a的值赋给了b,这里其实是b引用了a【传地址】
b.name="test2";//这里b.name改变了那么a.name也一样改了
 
JS中有垃圾对象自动回收机制,也可以主动删除1、当一个对象没有任何引用指向它的时候,就会被自动删除掉
        var a=new Person();
        var b=a;//这里对象a是被引用两次
        b=null;//这里变回1
        a=null; //这里就没有任何引用指向原来的对象了
 
2、使用delete,主动删除对象的某个属性
        var a=new Person();
        a.name='test1';
        var b=a;
        delete b.name;//删除name属性,那么通过a.name也无法访问了
       
 
 
一、如何定义一个原型对象
    1、使用构造函数来定义
            基本语法
            function 类名(){   //类名即原型对象名
               
            }
            创建对象 www.2cto.com
            var 对象名=new 类名;
            window.alert(对象名.constructor); //对象实例的构造方法
 
            如何判断一个对象是否属于某个类?
            1、使用instanceof
                if(a instanceof Person){
                    alert('yes');
                }
            2、使用constructor
                if(a.constructor == Person){
                    alert('yes');
                }  
       
    2、工厂方法,使用new Object创建对象,并添加相关属性
                function Person(){
                }
                var p1=new Person();
                p1.name='test';
    3、使用prototype(原型)
 
 
    4、构造函数及原型混合方式
 
    5、动态原型方式
 
二、this关键字
        function Person(){
            //这里定义了一个属性后,创建对象时将自动赋值给新对象
            this.name='test';
            //如果这样使用,则表示该属性是私有的
            var age = 90;
            //下面使用this,表示这是Person类的一个公开方法,可以访问私有方法
            this.show=function(){
                window.alert(age+''+name);
            }
            //这里表示是Person的一个私有的方法
            function show2(){
            }
        }
        var p1=new Person;
        var p2=new Person;
        alert(p1.name+' '+p2.name);//这里都为test,this为公开属性
        //p1.show2();  这里show2();是私有方法 ,所以如果在这里使用就会报错
 
 三、对象成员方法(函数)
        1、方法一:
           function Person(name,age){
                this.name=name;
                this.age=age;
                //输出名字,this.show就是一个公开的函数(每个对象都有),函数名show
                this.show=function(n){//可带参数
                    alert(this.name);
                }
            }
        2、方法二:
            function Person(name){
                this.name=name;
            }
            function show(){
                alert(this.name);
            }
            p1=new Person();
            //这种方法,就不是每个对象都有的函数了
            p1.abc=show;//这里不带括号,表示把show的构造函数传给p1.abc
            p1.abc();
 
            同样也可以直接用p1.abc创建函数
            p1.abc = function show(){
                alert(this.name);
            }
        3、方法三
            function Person(name){
                this.name=name;
            }
            var p1=new Person();
            //使用prototype创建的方法是所有对象都共享的
            Person.prototype.age=function(){
                this.age="12";
            }
            var p2=new Person();
            p1.age();
            alert(p1.age);//输出12
            alert(p2.age);//这里不会输出 ,因为p2还没有运行age(),运行后就可以获取age属性;
           
 四、Object类(基类)
            Object是javascript中所有类的基类
 
        var p1=new Object();//通过Object直接创建对象,这里p1就是对象了
        p1.name='test';//给p1的属性赋值
        通过Object创建的类有以下主要属性:
        1、contructor 对象构造函数
        2、prototype  原型,获得类的prototype对象,static属性
       
            var a=10;
            //给Number类添加一个add方法
            Number.prototype.add=function(a){
                return this+a;//使用这个方法,会增加a
            }
            alert(a.add(10).add(10));//这里a.add(10)运行后结果为20,那么20.add(10)运行后结果为30
       
成员函数小结:
1、成员函数的参数可以是多个
2、成员函数可以没有返回值,如果有返回值,最多只返回一个
3、JS中不支持函数重载,如果有多个函数名相同,则以最后一个为准
4、在js中直接定义一个函数或变量实际上就是全局函数和全局变量,他们是属于window的
        var a=90;
        alert(this.a);//这里输出就是90,因为都属于window

摘自 贝尔的技术博客

JS面向对象编程学习的更多相关文章

  1. 带你一分钟理解闭包--js面向对象编程

    上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...

  2. Js面向对象编程

    Js面向对象编程 1.     什么是面向对象编程? 我也不说不清楚什么是面向对象,反正就那么回事吧. 编程有时候是一件很快乐的事,写一些小游戏,用编程的方式玩游戏等等 2.     Js如何定义一个 ...

  3. js原生设计模式——3简单工厂模式\js面向对象编程实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. JS面向对象编程(进阶理解)

    JS 面向对象编程 如何创建JS对象 JSON语法声明对象(直接量声明对象) var obj = {}; 使用 Object 创建对象 var obj = new Object(); JS对象可以后期 ...

  5. 页面循环绑定(变量污染问题),js面向对象编程(对象属性增删改查),js字符串操作,js数组操作

    页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...

  6. js面向对象编程 ---- 系列教程

    原 js面向对象编程:数据的缓存 原 js面向对象编程:如何检测对象类型 原 js面向对象编程:if中可以使用那些作为判断条件呢? 原 js面向对象编程:this到底代表什么?第二篇 原 js面向对象 ...

  7. 简单粗暴地理解js原型链–js面向对象编程

    简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...

  8. JS面向对象编程,对象,属性,方法。

    document.write('<script type="text/javascript" src="http://api.map.baidu.com/api?v ...

  9. 前端学习:JS面向对象知识学习(图解)

    前端学习:JS面向对象知识学习(图解) 前端学习:JS(面向对象)代码笔记 JS面向对象图解知识全览 创建类和对象 方式1:使用Object()函数 方式2:使用自变量 方式3:使用工厂函数 创建多个 ...

随机推荐

  1. Java应用程序项目的打包与发行

    Java应用程序项目的打包与发行    这里主要是讲解一下怎样将 Java程序打包成独立运行的exe程序包,以下这种方法应该是最佳的解决方案了.NetDuke的EXE 程序包了是使用这种方案制作的.在 ...

  2. ThreadStart中如何带参数

    1.ThreadStart 线程执行带参数的方法,new Thread(new ThreadStart(delegate { ThreadTask(firstPage, lastPage); })); ...

  3. MyEclipse SVN 下面切换用户的解决方案

    configuration\org.eclipse.core.runtime\.keyring 删除MyEclipse下面的文件. 或者修改服务器端的用户密码.

  4. NODE_PATH的疑难杂症(转)

    nodejs 中的 NODE_PATH 在使用 nodejs 开发中我们都免不了要去安装一些第三方模块. 那么你或多或少的遇到过以下一些问题 再继续阅读之前,我们先来弄清楚一个概念. npm inst ...

  5. 【Spring boot】第一个项目 Springboot + mysql + hibernate

    今天公司要做一个小项目,好久没碰项目了(刷题好累...),听说spring boot很火,决定试一试.暂时就从mysql里面读数据好了,使用hiberante. 1.获取jar包. 从http://s ...

  6. 用 phpize 编译共享 PECL 扩展库

    有时候不能用 pecl 安装命令.这可能是因为在防火墙后面,或者是因为想要安装的扩展库还没有 PECL 兼容的包,例如 SVN 中尚未发布的扩展库.如果要编译这种扩展库,可以用更底层的编译工具来手工进 ...

  7. EasyUI 搜索框

    1.用法 (1).从标记创建.把 'easyui-searchbox' class 加入到 <input> 标记. <script type="text/javascrip ...

  8. JS-easyui 扩展easyui.datagrid,添加数据loading遮罩效果代码

    (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ return jq.each(functio ...

  9. 关于Unity中的Input输入事件

    截获鼠标,键盘的消息 监听事件我们都是在Update里面监听的. Unity的虚拟轴打开:Edit-->Project Settings-->Input,打开的各个Name就是双引号里面要 ...

  10. 关于Jsp中的三种弹框

    对话框有三种 1:只是提醒,不能对脚本产生任何改变: 2:一般用于确认,返回 true 或者 false ,所以可以轻松用于 if...else...判断 3:一个带输入的对话框,可以返回用户填入的字 ...