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

<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. java树型结构的数据展现设计

    在做一个需求管理的页面时,需求的展现是不限层级树型结构,需求下还可以分拆任务,页面要展现的字段有20多个,而且需求采用通用表单设计,db采用大宽表存储,有一百多个字段.目前数据量不大,第一版采用普通的 ...

  2. glassfish中新建数据源（创建数据库连接池）

    1.浏览器输入:http://localhost:4848 登录glassfish域管理控制台,默认的用户名和密码是amin和adminadmin.(也可以通过NetBeans的服务选项卡--服务器- ...

  3. centos 搭建pptp

    很多朋友不会在CENTOS 在安装vpn,因为对于菜鸟来说安装VPN的确是个头晕的事情,特别是安装openvpn,不过安装pptp就稍微简单一点,国内网上有很多安装pptp的教程,但是都很繁杂,我在国 ...

  4. 浅谈GFC

    Web页面的布局,我们常见的主要有“浮动布局(float)”.“定位布局(position)”.“行内块布局(inline-block)”.“CSS3的多栏布局(Columns)”.“伸缩布局(Fle ...

  5. 07Oracle Database 数据表

    Oracle Database 数据表 DDL 数据定义语言 -  建立数据库对象 create /alter/ drop/ truncate 创建表 Create table table_name( ...

  6. [转]SSD固态存储大观(一)

    From: http://blog.51cto.com/alanwu/1405874 Contents 1.概述... 1 2.FusionIO:Pcie SSD的始作俑者... 2 3.Intel ...

  7. oracle 内连接 左外连接 右外连接的用法,(+)符号用法

    1. 内连接很简单 select A.*, B.* from A,B where A.id = B.id select A.*, B.* from A inner join B on A.id = B ...

  8. 原来 JS 是这样的 - 关于 this

    引子 习惯了别的语言的思维习惯而不专门了解 JavaScript 的语言特性的话,难免踩到一些坑. 上一篇文章 中简单总结了关于 提升, 严格模式, 作用域 和 闭包 的几个常见问题,当然这仅仅是了解 ...

  9. Address already in use: JVM_Bind:8080错误的解决办法

    解决办法:先到命令行查找8080端口号被那个占用,输入后面的命令:netstat -ano 查到 然后到任务管理器把PID为20904的进程给结束掉,就OK了 -------------------- ...

  10. lua 栈最后调用的函数，用于看调试信息

    lua_getinfo int lua_getinfo (lua_State *L, const char *what, lua_Debug *ar); 返回一个指定的函数或函数调用的信息. 当用于取 ...