JS中定义对象的几种方式

最新推荐文章于 2022-08-08 17:27:00 发布
最新推荐文章于 2022-08-08 17:27:00 发布
阅读量410 收藏 2
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjxbj/article/details/84407735
版权

    1. 基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)：

<html>
<head>
    <title>基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)</title>
</head>
<script>
    var obj = new Object();
    obj.name="userObject";
    obj.printName = function(name){
        this.name = name;
        alert(this.name);
    }
    obj.printName("newUserObject");
</script>
<body>
</body>
</html>

 

    2.工厂方式创建对象(每次创建一个object后，其中对应的方法(本例中是get)也被创建一次，方法不能被所创建的所有对象(本例中是obj1和obj2)共享)：

a. 

<html>
<head>
    <title>工厂方式创建对象</title>
</head>
<script>
    function createObject(){
    var obj = new Object();
    obj.name="userObject";
    obj.password = "12345";
    obj.get = function(){
        alert(this.name + ", " + this.password);
    }
    return obj;
    }
    var obj1 = createObject();
    var obj2 = createObject();
    obj1.get();
    obj2.get();
</script>
<body>
</body>
</html>

b.带参数的构造方法：

<html>
<head>
    <title>工厂方式创建对象</title>
</head>
<script>
    function createObject(username,password){
    var obj = new Object();
    obj.username = username;
    obj.password = password;
    obj.get = function(){
        alert(this.username + ", " + this.password);
    }
    return obj;
    }
    var obj1 = createObject("zhangsan","123456");
    obj1.get();
</script>
<body>
</body>
</html>

 

c.让函数被多个创建的对象所共享，而不是每一个对象都创建一个相同的函数(缺点:对象定义本身和方法分离了)：

<html>
<head>
    <title>工厂方式创建对象</title>
</head>
<script>
    function get(){
    alert(this.username + ", " + this.password);
    }
   
    function createObject(username,password){
        var obj = new Object();
        obj.username = username;
        obj.password = password;
        obj.get = get;
        return obj;
    }
   
    var obj1 = createObject("zhangsan","123456");
    var obj2 = createObject("lisi","54321");
    obj1.get();
    obj2.get();
</script>
<body>
</body>
</html>

 

    3.构造函数方式：

a.

<html>
<head>
    <title>构造函数方式创建对象</title>
</head>
<script>
   
    function Person(){
    this.username = "zhangsan";
    this.password = "123";
    this.getInfo = function(){
        alert(this.username + ", " + this.password);
    }
    }
   
    var person = new Person();
    person.getInfo();
</script>

<body>
</body>
</html>

b.可以在构造函数是传递参数：

<html>
<head>
    <title>构造函数方式创建对象</title>
</head>
<script>
   
    function Person(username,password){
    this.username = username;
    this.password = password;
    this.getInfo = function(){
        alert(this.username + ", " + this.password);
    }
    }
    var person = new Person("zhangsan","123");
    person.getInfo();
</script>

<body>
</body>
</html>

 

    4.使用原型(prototype)方式创建对象：

优点：创建的多个对象共享同一个方法(getInfo)

缺点：创建的多个对象在共享同一个方法的同时也共享了同样的属性(username,password)，实际开发中这样儿是不行的，必须是多个对象都要有自己的属性。

采用该方式创建对象通常是用来扩展已有对象的某一个方法。

a.

<html>
<head>
    <title>使用原型(prototype)方式创建对象</title>
</head>
<script>
    
    function Person(){}
    Person.prototype.username = "zhangsan";
    Person.prototype.password = "123";
    Person.prototype.getInfo = function(){
        alert(this.username + ", " + this.password);
    }
    var person = new Person();
    var person2 = new Person();
    person.username = "lisi";
    person.getInfo();
    person2.getInfo();
</script>

<body>
</body>
</html>

 

b.如果使用原型方式创建对象，那么生成的所有对象将会共享原型中的属性，这样儿一个对象改变了该属性也会反应到其他的对象上：

<html>
<head>
    <title>使用原型(prototype)方式创建对象</title>
</head>
<script>
   
    function Person(){}
    Person.prototype.username = new Array(0);
    Person.prototype.password = "123";
    Person.prototype.getInfo = function(){
        alert(this.username + ", " + this.password);
    }
    var person = new Person();
    var person2 = new Person();
    person.username.push("zhangsan");
    person.username.push("lisi");
    person.password = "456";
    person.getInfo();
    person2.getInfo();
</script>

<body>
</body>
</html>

 

c.使用原型和构造函数方式来创建对象：

<html>
<head>
    <title>使用原型(prototype)方式创建对象</title>
</head>
<script>
   
    function Person(){
    this.username = new Array();
    this.password = "123"
    }
    Person.prototype.getInfo = function(){
        alert(this.username + ", " + this.password);
    }
    var person = new Person();
    var person2 = new Person();
    person.username.push("zhangsan");
    person.username.push("lisi");
    person.getInfo();
    person2.getInfo();
</script>

<body>
</body>
</html>

 

    5.动态原型方式：在构造函数中通过标志量让所有对象共享一个方法，而每个对象拥有自己的属性。

<html>
<head>
    <title>动态原型方式：在构造函数中通过标志量让所有对象共享一个方法，而每个对象拥有自己的属性</title>
</head>
<script>
   
    function Person(){
    this.username = "zhangsan";
    this.password = "123";
    if(typeof Person.flag == "undefined"){
        Person.prototype.getInfo = function(){
            alert(this.username + ", " + this.password);
        }
        Person.flag = true;
    }
    }
    var p = new Person();
    var p2 = new Person();
    p.getInfo();
    p2.getInfo();
    p.username="lisi";
    p.getInfo();
    p2.getInfo();
</script>

<body>
</body>
</html>
wjxbj
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS定义类或对象
04-25
Javascript是基于对象的脚本语言，理所当然会有对象概念的存在，通常我们在项目中都是运用“function fnname{…..}”的形式直接声明一个方法，再去调用。这么做很方便。但是如果你的项目中拥有频繁的JS操作，比如平凡的AJAX特效、页面分模块开发等等，需要大量的JS代码，如果都用这种形式，很难去控制、维护和扩展。所以定义对象可以让你仅仅记住对象名称极其作用，就会达到易控制，易维护和易扩展。在优化你的JS代码的同时也提升了你的开发水平。
js中创建对象的几种方式
12-11
本文穿插了js原型和函数的相关知识，讨论了批量创建对象的几种方式以及它们的优缺点。 正文 说起创建对象，最容易想到的便是通过对象字面量方式直接定义一个对象吧，但这种方式只能创建少量，单独且相互间无联系的...
js对象定义的3种方法
xiaoweids的博客
06-10 1万+
转自：微点阅读 https://www.weidianyuedu.com方法一：通过var object={} 对象字面量(1)，可以叫对象直接量来自定义一个对象。对象自面量是一个表达式，这个表达式的每次运算都创建并初始化一个新对象。var user = { x:1,y:2,z:3,pp:function(){ alert("22222222") }}//用字面量定义一个对象，是以名值对的方式来保存的alert(user.y) //调用属性user.pp() //调用方法(2) var s
Javascript中五种定义对象的方法
LinDadaxia的博客
07-16 1万+
在javascript中，对象是拥有属性和方法的数据 本次主要讨论五种定义对象的方法 1.直接定义 创建语法： var 对象变量名 = new Object(); 对象变量名.属性1 = 属性值1; …; 对象变量名. 属性N = 属性值N; 对象变量名. 方法1 = function([参数列表]){ 方法体 } …; 对象变量名. 方法N = function([参数列表]){ 方法体 } 代码示例： var student = new Object(); student.name.
029-Web前端-JS-对象和函数
快要脑溢血的LEE
06-11 321
对象和函数 #6.11 第二篇 Javascript函数 & Javascript对象 1.Javascript函数 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 语法： function 函数名(参数1，参数2...){ 函数体; } 注意： a.函数可以没有参数 b.函数名的命名规则符合变量的命名规则即可 c.函数体允许有多句，它是函数在执行时执行的代码 d.函数在制作时有几...
JS中自定义对象
低调做人，高调做事
05-27 6664
概念理解 JSON：JavaScript Object Natation，JavaScript对象的表现形式，指定义JS对象的一种方式，已经发展成一种轻量级的数据交换格式。json是js的原生内容，也就是说在js中处理json数据不需要任何特殊的API或者工具包便可取出json中的数据。 js中创建对象的方法 通过js内置对象（少用），例： var person=new Object();//...
JAVASCRIPT中定义对象的几种方式.pdf
10-08
JAVASCRIPT中定义对象的几种方式.pdf
关于JavaScript定义类和对象的几种方式
10-28
在说这个话题之前，我想先说几句题外话：最近偶然碰到有朋友问我“hoisting”的问题。即在js里所有变量的声明都是置顶的，而赋值则是在之后发生的。
JavaScript中定义对象的四种方式
06-03 808
JavaScript中定义对象的四种方式    最近在阅读《 JavaScript 高级程序设计》，未免遗忘读过的内容，就打算以博客的形式做些读书笔记。今天介绍的是 JavaScript 中的四种定义对象的方法，除了这四种方法，还有工厂方法来定义对象，但考虑到其简单性及非正规性，这里就不做介绍。和 Java 这样的面向对象语言相比， JavaScript 更像是函数式语言，其并没有类的概念
JavaScript对象结构技巧
Ustinian
08-08 1365
关于JavaScript，我们得到了一种从对象中提取属性的非常有用的方法
JS中自定义类和对象.doc
10-09
JS中自定义类和对象，工厂方法，构造函数，混合使用工厂方法和Prototype，修改对象
js创建自定义对象的几种方式
hangzhang
08-27 9926
js创建对象的几种方式
JS 之函数定义 & 创建对象 三种方式
xiongfeng
10-20 7804
JS函数创建三种方式 JS创建对象三种方式一、javaScript 函数创建的三种方式<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>The three ways </title> <script type="text/javascript"> /* 方式一、functi
js中定义对象的几种方式
lzlzlglz的专栏
04-10 436
js中定义对象的几种方式 　　1. 基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)： 　　var obj = new Object(); 　　obj.name="userObject"; 　　obj.printName = function(name){ 　　this.name = name; 　　alert(this.name); 　　} 　　obj.printNam...
js 定义一个对象并且给对象赋值方法
热门推荐
builderwfy的专栏
06-22 2万+
var  obj={}; obj.fieldid="12"; obj.fieldid="13" 取得属性值直接用 obj.fieldid;
在js对象中定义属性和方法的实例。
看不过的黑工坊
10-21 1913
关键代码： //登录用户类 function LoginUser() { this.dept_pk = 0; this.dept_name = ''; this.uname = ''; this.role_pks = ''; this.latitude = ''; this.longitude = ''; this.role_authority = []; this.map_z
JS中定义对象和集合
qq_42784229的博客
03-01 5871
在JS中定义的对象： var obj={}; obj ['a'] = a; obj ['b'] = b; 在JS中定义集合： var arr=[]; arr.push(obj);
JavaScript中的对象，如何创建对象，创建对象的7种模式
SweetoDream
08-14 1万+
ECMA-262把对象定义为：”无需属性的集合，其属性可以包含基本值、对象或者函数。”严格来讲，这就相当于说明对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字，而每个名字都映射到一个值。正因为这样，我们可以把ECMAScript的对象想象成散列表：无非就是一组名对值，其中值可以是数据或函数。        创建自定义对象最简单的方式就是创建一个Object的实例，然后再为他添加属性和方
javascript有哪些方法定义对象
weixin_44064067的博客
09-07 128
对象字面量： var obj = {}; 构造函数： var obj = new Object(); Object.create(): var obj = Object.create(Object.prototype); Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。 可以使用该方法实现继承 // 子类续承父类 Rectangle.prototype = Object.create(Shape.prototype); Rectangle.prot
javascript创建对象的几种方式
最新发布
06-28
JavaScript创建对象的几种方式包括： 1. 对象字面量：使用花括号{}创建一个对象，可以在其中定义属性和方法。 2. 构造函数：使用关键字new和一个函数来创建一个对象，可以在函数中定义属性和方法。 3. Object....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值