基于原型的面向对象编程

1.对象编程概述

JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。 在 JavaScript
中,对象是变量和函数集合,对象中的变量成为属性(property),对象中的函数称为方法(method),对象是拥有属性和方法的数据。

系统对象:
在这里插入图片描述

2.自定义对象的创建和使用

(1)var 对象名=new Object ( ) ;

(function () {
            var yjq=new Object();				//创建yjq对象
            yjq.name="好动得肥哈";			//yjq中的那么属性
            yjq.CSDN="https://blog.csdn.net/weixin_43383738";			//yjq中的那么属性
			yjq.id=43383738;				//yjq中的那么属性
			
            document.write("名字: "+yjq.name+"<br/>");
            document.write("CSDN: "+yjq.CSDN+"<br/>");
            document.write("id: "+yjq.id+"<br/>");
        })();

在这里插入图片描述
(2)对象实现简单计算

(function () {
            var yjq=new Object();
            yjq.pi=3.14;            //定义属性pi

            yjq.add=function(n1,n2){return n1+n2};
            yjq.sub=function (n1,n2) {return n1-n2};
            yjq.mul=function (n1,n2) {return n1*n2};
            yjq.div=function (n1,n2) {return n1/n2};

            document.write("4 + 3 = "+yjq.add(4,3)+"<br/>");
            document.write("4 - 3 = "+yjq.sub(4,3)+"<br/>");
            document.write("4 * 3 = "+yjq.mul(4,3)+"<br/>");
            document.write("4 ÷ 3 = "+yjq.div(4,3)+"<br/>");

            document.write("yjq的属性pi "+yjq["pi"]+"<br/>");     //数组运算符访问属性
        })();

在这里插入图片描述

(3)创建图片对象

(function () {
            function image(_src,_width,_height) {       //构造函数
                this.src=_src;
                this.width=_width;
                this.height=_height;
            }

            var yjq=new image("images/seven.jpg",300,300);
            yjq.print_img=function () {         //      相当于function yjq.print_img(){};
            	 document.write("下方出现图片"+"<br/>");
                document.write("<img src="+this.src+" width="+this.width+" height="+this.height+"/>");
            };
            yjq.print_img();        //方法
        })();

在这里插入图片描述

(4)使用with简化对象操作–with(对象名){… …}

(function () {
            function yjq(username,age,website) {
                this.username=username;
                this.age=age;
                this.website=website;
            }

            var personal=new yjq("yjq","21","www.520yjqcy.top");
            with(personal){     //with简化后的方法
                document.write("用户名: "+username+"<br/>")
                document.write("年龄: "+age+"<br/>")
                document.write("网站: "+website+"<br/>")
            }

            //对比旧方法
            var old=new yjq("old","20","www.520yjqcy.top/seo");
            document.write("<br/>")
            document.write("用户名: "+old.username+"<br/>")
            document.write("年龄: "+old.age+"<br/>")
            document.write("网站: "+old.website+"<br/>")

        })();

在这里插入图片描述

(5)instanceof运算符判断对象类型–对象名 instanceof 对象类型

(function () {
            function Fruits() {};           //定义水果类
            function Vegetables() {};           //定义蔬菜类

            var apple=new Fruits();
            var potato=new Vegetables();

            document.write("var apple=new Fruits();"+"<br/>");
            document.write("var potato=new Vegetables();"+"<br/>");

            var belong=false;

            document.write("<br/>"+"Fruits类型"+"<br/>");
            belong=apple instanceof Fruits;
            document.write("测试apple是否属于Fruits类型;"+belong+"<br/>");
            belong=potato instanceof Fruits;
            document.write("测试potato是否属于Fruits类型;"+belong+"<br/>");

            document.write("<br/>"+"Vegetables类型"+"<br/>");
            belong=apple instanceof Vegetables;
            document.write("测试apple是否属于Vegetables类型;"+belong+"<br/>");
            belong=potato instanceof Vegetables;
            document.write("测试potato是否属于Vegetables类型;"+belong+"<br/>");

            belong=apple instanceof Object;
            document.write("<br/>"+"Object类型"+"<br/>");
            document.write("测试apple是否属于Object类型;"+belong+"<br/>");
            belong=potato instanceof Object;
            document.write("测试potato是否属于Object类型;"+belong+"<br/>")
            document.write("测试表明Object是JavaScript中根对象类型,任何对象都属于Object类型"+"<br/>");
        })();

在这里插入图片描述

(6)使用instanceof运算符检查参数的类型

function yjq(name,age) {
            this.username=username;
            this.age=age;
        }

        function belong(s) {            //belong测试函数
            if(!(s instanceof  yjq)){
                document.write("对象不是yjq类型")
                return;
            }
            with (s){
                document.write("<br/>")
                document.write("用户名: "+username+"<br/>")
                document.write("年龄: "+age+"<br/>")
            }
       }

        (function () {
            var yjq1=new yjq("yjq","20");           //yjq对象
            var yyy=100;            //测试对象

            document.write("yjq1的类型对象信息:");
            belong(yjq1);

            document.write("<br/>")
            document.write("yyy的类型对象信息:");
            document.write("<br/>")
            belong(yyy);
        })();

在这里插入图片描述

(7)使用for…in循环遍历对象成员

(function () {
            function yjq(username,age,website) {        //描述人物的对象类型
                this.username=username;
                this.age=age;
                this.website=website;
            };

            var seven=new yjq("yjq","20","www.520yjqcy.top");       //创建对象人物seven

            for(var property in seven){         //遍历seven中的属性
                document.write("对象seven中的"+property+"属性:"+seven[property]+"<br/>");
            }
        })();

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值