三种常见模式：工厂模式，构造函数模式，原型模式

<span style="font-size:18px;"><!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Object</title>

</head>

<body>

<h1>创建对象常见的三种方式</h1>

</body>

<script>

    window.onload=function(){

        //工厂模式

        function oj(){

            var lio=new Object();

            lio.name='lio';

            lio.attr='男';

            lio.hobby=function(){

                var li=document.createElement("p");

                var txt=document.createTextNode("三妹");

                li.appendChild(txt);

                document.body.appendChild(li);

            };

            return lio;

        }

        var person=oj();

        //alert(person.name);

        //构造函数模式

        function oj2(name,age){

            this.name=name;

            this.age=age;

            this.hobby=function(){

                var li=document.createElement("p");

                var txt=document.createTextNode("三妹");

                li.appendChild(txt);

                document.body.appendChild(li);

            }

        }

        var person2=new oj2('三妹',123);

        person2.hobby();

        alert(person2.name);

        //原型模式

        function oj3(){

            //this.name='lio';

        }

        oj3.prototype.name='lio';

        oj3.prototype.love= function (name) {

            alert("爱"+name);

        };

        var person3=new oj3();

        //检測是在实例中还是在原型中

        alert(person3.hasOwnProperty("name"));

        alert(person3.hasOwnProperty("rename"));

        person3.love('三妹');

        //混合模式

        function oj4(age) {

            this.age=age;

            this.rename='aaaa';

        };

        oj4.prototype={

            constructor:oj4,

            name:'lio',

            age:123,

            love: function (name) {

                alert(name+"爱三妹");

            }

        };

        var person4=new oj4(18);

        alert(person4.hasOwnProperty("age"));//true

        person4.love('lio');

    }

</script>

</html></span>



js对象实例化的常见三种方式的更多相关文章

  1. Spring学习之实例化bean的三种方式

    实例化bean的三种方式 构造器实例化bean Person.java public class Person { private String name; private Integer age; ...

  2. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  3. JS弹出对话框的三种方式

    JS弹出对话框的三种方式 我们用到了alert()方法.prompt()方法.prompt()方法,都是在网页有一个弹出框,那么就让我们探究一下他们之间的区别: 一.第一种:alert()方法 < ...

  4. Js构造对象-添加方法的三种方式

    Js构造函数添加方法有多种方案,来看一个混合方式构造函数的例子:申明person构造函数,有两个属性,name,qq.在原型上添加方法showname.这是最常用的方法. <script> ...

  5. js中点击事件方法三种方式的区别

    在javascript中,可以为某个元素指定事件,指定的方式有以下三种: 1.在html中,使用onclick属性 2.在javascript中,使用onclick属性 (1)注意函数名没有双引号. ...

  6. js弹出对话框的三种方式（转）

    原文地址:https://www.jb51.net/article/81376.htm javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prom ...

  7. js中定义变量的三种方式const,val,let 的区别

    js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. 1 const b = 2;//正确 2 // const b;//错误,必须初始 ...

  8. Spring 实例化bean的三种方式

    第一种方法:直接配置Bean <bena id="所需要实例化的一个实例名称" class="包名.类名"/> 例如: 配置文件中的bean.XML ...

  9. js实现选项卡切换的三种方式

    前两种主要实现一个选项卡的切换,第三种使用闭包看书,构造函数实现多个选项卡的切换: 1.第一种实现实现效果为: 实现代码为: <!doctype html> <!DOCTYPE ht ...

随机推荐

  1. Dreamweaver启动出错--Designer.xml错误

    Designer.xml错误导致Dreamweaver CS4无法启动 xml parsing fatal error:Invalid document structure,line:1, file: ...

  2. daxcie

    Database->Edit Current DBMS菜单 修改如下:选中General选项卡,依次打开Script->Sql->Fomat->CaseSensitivityU ...

  3. python bs4库

    Beautiful Soup parses anything you give it, and does the tree traversal stuff for you. BeautifulSoup ...

  4. sql之inner join

    这个嘛...经常写sql写的我怀疑自己:算了还是记下来了再强调一遍!再强调一遍!再强调一遍!:虽然很傻逼... inner join(等值连接) 只返回两个表中联结字段相等的行

  5. xmpp之配置Xcode（1）

    介绍 ios上的XMPPFramework你能够在Xcode/iPhoneXMPP 目录找到,它只是实现了XMPP的一小部分功能. 下面主要介绍在开发XMPPFramework ios应用之前的配置工 ...

  6. Git安装使用指南

    Git安装使用指南 Git原理示意图 1. 安装git Linux服务器版本为Redhat6.2-64,其他版本可能有些许不同 1.1 安装依赖包 在安装git前首先安装依赖包,包括的依赖包有: cv ...

  7. 深入分析同步工具类之CountDownLatch

    概览: CountDownLatch又称闭锁,其作用是让一个或者多个线程挂起,直到其他的线程执行完后恢复挂起的线程,使其继续执行.内部维护着一个静态内部类Sync,该类继承AbstractQueued ...

  8. Python使用Flask框架，结合Highchart处理csv数据(引申-从文件获取数据--从数据库获取数据)

    参考链接:https://www.highcharts.com.cn/docs/process-text-data-file 1.javascript代码 var options = { chart: ...

  9. Linux命令学习(3): zcat 直接查看压缩文件

    版权声明:本文为博主原创文章,未经允许不得转载. zcat 用途:在不解压文件的情况下,直接将文件内容输出到标准输出.(原压缩文件不做任何更改) 格式:zcat [-n] [-V] [FILE] 参数 ...

  10. 腾讯云：iptables基础

    iptables 基础 iptables 基本命令 任务时间:5min ~ 10min iptables 可以简单理解为 Linux 系统内核级防火墙 netfilter 的用户态客户端. Linux ...