JavaScript创建对象

于 2021-03-16 23:53:54 发布
阅读量179 收藏
点赞数
分类专栏： 编程语言 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012866052/article/details/114907290
版权

目录

一、对象

(一）创建对象的两种基本形式

1、创建对象-Object构造函数形式

2、创建对象-对象字面量形式

(二）属性类型

1、数据属性的4个特性

2、访问器属性的4个特性

3、操纵特性

二、创建对象

（一）工厂模式

（二）自定义构造函数

（三）原型模式

1、原型模式

2、原型对象和实例的操纵

（四）组合使用构造函数模式和原型模式

《JavaScript高级程序设计》学习笔记

ECMA-262把对象定义为：对象是无序属性的集合，其属性可以包含基本值、对象或函数

一、对象

(一）创建对象的两种基本形式

1、创建对象-Object构造函数形式

var person = new Object(); //使用Object构造函数创建对象
person.name = "zhangSan";
person.say = function(){
    alert(this.name);
};

person.say();

2、创建对象-对象字面量形式

var person = { //直接使用对象字面量形式创建对象
    name:"zhangSan",
    say:function(){
        alert(this.name)
    }
};

person.say();

(二）属性类型

ECMAScript中有两种属性：数据属性、访问器属性。

特性是用来描述属性的行为特征，特性是内部值

  • 数据属性包含一个数据值的位置，即可以存放基本数据类型和引用数据类型。
  • 访问器属性不包含数据值，包含一对getter和setter函数。用于访问或者设置数据

1、数据属性的4个特性

  • [[Configurable]]：是否可通过delete删除属性，能否修改属性的特征或者把属性修改为访问器属性，默认true。
  • [[Enumerable]]：表示能否通过for-in循环返回属性，默认true。
  • [[Witable]]：能否修改属性的值，默认true。
  • [[Value]]：属性的值，默认undefined。

2、访问器属性的4个特性

  • [[Configurable]]：是否可通过delete删除属性，能否修改属性的特征或者把属性修改为访问器属性，默认true。
  • [[Enumerable]]：表示能否通过for-in循环返回属性，默认true。
  • [[Set]]：在写入属性时调用的函数，默认为undefined。
  • [[Get]]：在读取属性时调用的函数，默认为undefined。

3、操纵特性

ECMAScript5 的 Object.defineProperty()方法可以操纵特性。该方法接受三个参数：属性所在的参数、属性的名字和一个描述符对象。

  • 操纵数据属性特性
//操纵数据属性特性
var person = {};
Object.defineProperty(person,"name",{ //注意第二个参数要加双引号
    writable:false,
    value:"zhangSan"
})


alert(person.name);// zhangSan
person.name = "li";

alert(person.name);// zhangSan
  • 操纵访问器属性特性
//操纵访问器属性特性
var book = {
            _year: 2004,
            edition: 1
        };
          
        Object.defineProperty(book, "year", {
            get: function(){
                return this._year;
            },
            set: function(newValue){
            
                if (newValue > 2004) {
                    this._year = newValue;
                    this.edition += newValue - 2004;
                
                }
            }
        });
        
        book.year = 2005;
        alert(book.edition);   //2

4、读取属性特性

var book = {};
        
        Object.defineProperties(book, {
            _year: {
                value: 2004
            },
            
            edition: {
                value: 1
            },
            
            year: {            
                get: function(){
                    return this._year;
                },
                
                set: function(newValue){
                    if (newValue > 2004) {
                        this._year = newValue;
                        this.edition += newValue - 2004;
                    }                  
                }            
            }        
        });
        //使用getOwnPropertyDescriptor（）方法读取属性的特性
        var descriptor = Object.getOwnPropertyDescriptor(book, "_year");
        alert(descriptor.value);          //2004
        alert(descriptor.configurable);   //false
        alert(typeof descriptor.get);     //"undefined"
        
        var descriptor = Object.getOwnPropertyDescriptor(book, "year");
        alert(descriptor.value);          //undefined
        alert(descriptor.enumerable);     //false
        alert(typeof descriptor.get);     //"function"

二、创建对象

（一）工厂模式

使用Object构造函数方式或对象字面量形式在创建多个类似的对象时，会产生大量的重复代码。为了解决重复代码的问题，使用工厂模式创建对象。

function createObject(name,age,job){ //调用一次函数即可创建一个对象
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    }

    return o;
}

p = createObject("xufeng",28,"best");
p.sayName();

缺点：工厂模式创建的对象无法得知对象类型，因为这种新对象并没有类型名字。同时也无法让实例共享属性和方法

（二）自定义构造函数

为了解决工厂模式的缺点，自定义构造函数可以将它的实例标识作为一种特定的类型。

使用自定义构造函数定义：

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
    };
}

var p = new Person("小明",20,"student");
var s = new Person("老师",39,"Teacher");

alert(p instanceof Object);  //true
alert(p instanceof Person);  //true,对象视为Person类型

自定义构造函数名字以大写字母开头，要使用构造函数创建实例，必须使用new操作符。在创建构造函数时经历以下4步（重要）：

  1. 创建一个新对象
  2. 将函数内的作用域赋予新对象（this指向新对象）
  3. 执行构造函数的代码（为新对象添加属性）
  4. 返回新对象

缺点：每个通过构造函数创建的对象不能共享属性和方法。如上述的sayName ()方法，调用一次Person构造函数便生成一次函数实例。

 

（三）原型模式

1、原型模式

  1. 每个函数均有一个prototype（原型）属性，该属性指向函数的原型对象。该对象的用途是可以包含由特定类型的所有实例共享的属性和方法。所有的原型对象会自动获得constructor属性，回指向函数。
  2. 每个实例均有一个内部属性[[Prototype]]，该属性指向其构造函数的原型对象。
function Person(){};//自动创建Person的原型对象

 

使用函数的prototype（原型）属性让对象之间可以共享属性和方法，解决自定义构造函数无法共享属性和方法的缺点。

每个构造函数和实例无直接关系。而构造函数的实例有内部属性[[Prototype]]指向构造函数的原型对象。

function Person(){};

//将需共享的属性和方法放入构造函数的原型对象，实现共享
Person.prototype.name = "zhangSan";
Person.prototype.age = 28;
Person.prototype.sayName = function(){
    alert(this.name);
};

var p1 = new Person();
var p2 = new Person();

alert(p1.sayName == p2.sayName); //true

p1、p2共享Person构造函数原型对象内的属性name、age，和方法sayName。

缺点：原型模式会共享原型对象中所有的属性和方法。由于共享机制，若属性为引用类型，则实例之间可能会共享属性的修改，即实例之间的属性值会相互影响。

    function Person(){};

    Person.prototype.name = "zhangSan";
    Person.prototype.friends = ["li","wang","xu"];
    Person.prototype.age = 30;
    Person.prototype.sayName = function(){
        alert(this.name);
    };

    var p1 = new Person();
    var p2 = new Person();
    p1.friends.push("niu")
    
    //修改p1的属性会影响p2的属性
    alert(p2.friends);//li,wang,xu,niu

2、原型对象和实例的操纵

每个实例均有一个内部属性[[Prototype]]，该属性指向其构造函数的原型对象，但所有实现无法访问内部属性[[Prototype]]。

（1）isPrototypeOf

使用isPrototypeOf（）方法判断对象之间是否存在原型关系，若存在则返回true。

alert(Person.prototype.isPrototypeOf(p1));  //true

 

（2）Object.getPrototypeOf

ECMAScript5增加了一个新方法Object.getPrototypeOf（），该方法返回实例的[[Prototype]]的值。

alert(Object.getPrototypeOf(p1).name); //zhangSan

 

(3) hasOwnProperty

hasOwnProperty()检查一个属性是否存在于实例中。

    function Person(){};

    Person.prototype.name = "zhangSan";
    Person.prototype.age = 28;
    Person.prototype.sayName = function(){
        alert(this.name);
    };

    var p1 = new Person();
    p1.age = 30;
    
    alert(p1.hasOwnProperty("name"));//false，name不存在于p1实例中
    alert(p1.hasOwnProperty("age")); //true，age存在于p1实例中

由于in操作符可以判断该实例是否可以访问某个对象，因此hasOwnProperty()方法配合in操作符可以判断属性是否存在于实例中，还是存在于原型中。

function hasPrototypeProperty(object,name){
    //若name不存在与实例中，且in操作符能访问name属性，则name属性存在于原型中
    return !obeject.hasOwnProperty(name) && (name in object);
}}

(4) Object.keys

使用Object.keys()可以取得对象上所有可枚举的属性。

    function Person(){};

    Person.prototype.name = "zhangSan";
    Person.prototype.age = 28;
    Person.prototype.sayName = function(){
        alert(this.name);
    };

    var p1 = new Person();
    p1.age = 30;
    
    alert(Object.keys(Person.prototype));//name,age,sayName
    alert(Object.keys(p1));//age

（5）Object.getOwnPropertyName

取得所有属性，其中包括不可枚举属性

function Person(){};

    Person.prototype.name = "zhangSan";
    Person.prototype.age = 28;
    Person.prototype.sayName = function(){
        alert(this.name);
    };
    
    alert(Object.getOwnPropertyNames(Person.prototype));//constructor,name,age,sayName

 

（四）组合使用构造函数模式和原型模式

单用原型模式会由于共享机制而发生实例间属性的相互影响。因此可以将需共享的属性和方法放入对象原型中，而将无需共享的属性放入构造函数，实现构造函数模式和原型模式。

function Person(){ 
    //将无需共享的属性放入构造函数   
    this.name = "zhangSan";
    this.friends = ["li","wang","xu"];
    this.age = 30;
}；
//将需要共享的方法放入原型对象中
Person.prototype.sayName = function(){
    alert(this.name);
};

var p1 = new Person();
var p2 = new Person();
p1.friends.push("niu");
//实例间的属性不会相互影响
alert(p2.friends);//li,wang,xu

 

 

xufengww
关注
专栏目录
JavaScript 创建对象
10-29
以下将详细介绍几种常见的JavaScript创建对象的方法。 1. JSON方式/对象直接量 这是最直观且最常用的方法，通过大括号{}直接创建对象。例如： ```javascript var person = { name: "张三", age: 30, sayHello: ...
javascript创建对象的方式（二）
04-02
这篇博客“javascript创建对象的方式（二）”可能详细介绍了在JavaScript中除了最基础的字面量语法之外的其他创建对象的方法。这里我们将深入探讨几种常见的创建对象的方式。 1. **构造函数**： JavaScript中的...
JavaScript对象系统深入剖析3-创建对象Object.Create
haierboos
02-01 184
3.创建对象Object.Create @吴穹Adam 看这两天同学们的反馈还是觉得比较难懂，因此，决定再举一个例子帮助大家理解吧，后面有关Scope和闭包Closure的精彩内容就只好晚一点写了！ 其实，这个系列不是写给初学者的，而是写给那些中级JS程序员的，对JS有一定的认识，希望这个系列能够帮助他们透过现象看到本质。同时，这里面的内容是高度浓缩的，向1,2节基本上对应了JavaScri...
javascript Object.create()函数
Niko_Yu的博客
12-04 193
javascript Object.create()函数Object.create() 方法会使用指定的原型对象及其属性去创建一个新的对象。 语法1Object.create(proto, [ propertiesObject ]) 参数1proto2一个对象，应该是新创建的对象的原型。3propertiesObject4可选。该参数对象是一组属性与值，该对象的属性名称将是新创建的对象的属性名...
[ javascript ] 使用Object.create()创建对象
ljw1412的博客
06-01 424
Object.create() 创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。 具体文档 语法 Object.create(proto[, propertiesObject]) 参数 proto: 新创建对象的原型对象。 propertiesObject: 可选。如果没有指定为 undefined，则是要添加到新创建对象的不可枚举（默认）属性（即其自身定义的属性，而不是其原型链上的枚举属性）对象的属性描述符以及相应的属性名称。这些属性对应Object.defineProper
JavaScript新的对象创建方式---Object.create()
baidu_28452269的博客
10-13 324
Object.create(proto [, propertiesObject ]) 是E5中提出的一种新的对象创建方式， 第一个参数是要继承的原型，如果不是一个子函数，可以传一个null， 第二个参数是对象的属性描述符，这个参数是可选的。 function Car (desc) { this.desc = desc; this.color = "red"; } Car.
javascript创建对象的两种方式
hc731800837的博客
05-29 647
function createObject(){    var obj = new Object();    obj.name = "fangfang";    obj.age = 20;    obj.func = function(){}    return obj;}function createObject(){    this.name = "fang fang";    this.ag...
javascript创建对象的3种方法
11-30
总结来说，JavaScript创建对象的方法有多种，每种都有其适用的场景。JSON对象适合临时使用，`Object`实例适合简单场景，而构造函数及原型链则更适合构建复杂的、可复用的对象模型。在实际开发中，应根据项目需求选择...
Javascript 创建对象的五种方式
杏子
02-24 297
一、最简单的方式，创建一个Object实例 var obj = new Object(); obj.name = 'zhangsan'; obj.sayName = function(){ console.log(this.name); }; 二、最方便的方式，对象字面量 var obj = { name:'zhangsan', sayName:function(){ console.l...
javascript 常用代码大全
蚂蚁的小窝
05-31 1345
javascript 常用代码大全 以下正文： //打开模式对话框 function doSelectUser(txtId) { strFeatures="dialogWidth=500px;dialogHeight=360px;center=yes;middle=yes ;help=no;status=no;scroll=no"; var url,strReturn; url="selUser.
[js]总结js创建object的方式（对象）
JOJO_SILVER的博客
12-22 432
1、使用new操作符后跟Object构造函数 如：  var person = new Object();  可以写成 var person = {};  person.name = "kitty";  person.age = 25; 2、使用“对象字面量”表示法，如：  var person = {       name : "kitty",       age:25  };
JavaScript面向对象之创建对象
lishuangcsdn的博客
11-09 233
JavaScript高级面向对象 我们常见的有两种方式去创建对象。第一种是通过new Object得到， var person=new Object(); person.name="刘凯"; person.age=22; person.say=function(){ //必须加this，指向person对象所定义的属性 alert("我的名字叫："+this.name+"，我今年"
js创建对象的几种方式
qq_41648408的博客
02-25 6031
js常用的几种创建对象的方式有： {} new Ｏbject() 使用字面量 工厂模式 构造函数模式（constructor） 原型模式（prototype） 构造函数+原型模式 还有一些不常用的方式，如动态原型，寄生构造函数，稳妥构造函数。 一、通过{}创建对象 demo1： 01.newObj-1.html <script> 'use strict'; //使用strict模式 /** 使用{}创建对象，等同于 new Object();
你不知道的javascript之Object.create 和new区别
热门推荐
程序员秋风的博客
06-12 3万+
博客原文地址：http://blog.csdn.net/blueblueskyhua/article/details/73135938 前几天有碰到原型的问题。之前以为自己对原型还是有所了解，但是细细研究，发现自己对原型的理解还是太年轻了。 Object.create 和new 创建对象的方式，我以我碰到的两种创建方式，Object.create 和new来说明 var Bas...
JS中Object.create()的使用与实现
SCUhzs
09-17 2384
文章目录参数返回值异常用法用 `Object.create`实现类式继承使用 `Object.create` 的 `propertyObject`参数实现参考资料 参数 object.create方法有两个参数 proto 必须的 是新建对象的原型对象 propertiesObject 可选的 如果没有指定为 undefined，则是要添加到新创建对象的不可枚举（默认）属性（即其自身定义的属性，而不是其原型链上的枚举属性）对象的属性描述符以及相应的属性名称。这些属性对应Object.defin
深入解析JavaScript创建对象的八大技巧
"这篇文章主要介绍了JavaScript创建对象的八种方法，包括使用Object构造函数、对象字面量、工厂模式、构造函数等。" 在JavaScript中，创建对象是编程中的基本操作，这里我们来详细探讨一下文章中提到的八种方法。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值