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

<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环境变量配置后未变动配置失效处理

    环境: Windows 7 x64 配置方案来源于教程: http://www.mamicode.com/info-detail-563355.html 配置方案出现的问题: 正确配置JAVA环境变量 ...

  2. FPGA编程技巧系列之输入输出偏移约束详解

    1.   偏移约束的作用 偏移约束(Offset Constraint)用来定义一个外部时钟引脚(Pad)和数据输入输出引脚之间的时序关系,这种时序关系也被称为器件上的Pad-to-Setup或Clo ...

  3. View Programming Guide for iOS

    https://developer.apple.com/library/archive/documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/Wi ...

  4. Crash (computing)

    In computing, a crash (or system crash) occurs when a computer program, such as a software applicati ...

  5. offset 后 指针数组转换

    AcDbObjectId pidoffset; AcDbPolyline *plineOffset; AcDbVoidPtrArray ptarr=NULL; pline->getOffsetC ...

  6. java虚拟机(六)--垃圾收集器和内存分配策略

    目前没有完美的收集器,不同的厂商.版本的虚拟机提供的垃圾收集器会有很大的差别,用户根据自己应用特点和要求组合出各个年代所使用 的收集器.基于jdk1.7Update14之后的虚拟机. HotSpot的 ...

  7. Microsoft SQL Server 安全与权限

    Microsoft SQL Server 安全与权限 登陆角色 计算机操作系统用户 --创建Windows身份验证用户 USE [master] GO CREATE LOGIN [计算机名称\计算机用 ...

  8. Intellij idea 生成for循环代码块

    itar 生成array for代码块 for (int i = 0; i < array.length; i++) { = array[i]; } itco 生成Collection迭代 fo ...

  9. buf.readDoubleBE()

    buf.readDoubleBE(offset[, noAssert]) buf.readDoubleLE(offset[, noAssert]) offset {Number} 0 <= of ...

  10. 在vue项目中使用stylus来实现移动端的1px

    1.目录结构(vue项目,但是并不局限于vue) 2.首先定义一个mixin.styl文件 border-1px($color) position: relative &:after disp ...