详细分析Javascript中创建对象的四种方式_javascript技巧

前言

使用Javascript创建对象的方式有很多,现在就来列举一下其中的四种方式,并且罗列出了每种方式的优缺点,可以让大家进行选择使用,下面来看看。

工厂模式

 function createPerson(name, age){
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 return obj; //一定要返回,否则打印undefined:undefined
 }
 var person1 = new createPerson('Young',18);
 console.log(person1.name + ':' + person1.age);

优点:工厂模式可以解决创建多个相似对象

缺点:没有解决对象识别问题(怎样确定一个对象的类型)

构造函数模式

 function Person(name,age){
 this.name = name;
 this.age = age;
 }
 var person1 = new Person('Young',18);
 console.log(person1.name + ':' + person1.age);

在说优缺点之前,先来说说她本身的一点小故事吧

将构造函数当做函数使用

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

 //当做构造函数使用
 var person1 = new Person('Young', 18);
 person1.sayName();
 console.log(person1.name + ':' + person1.age);

 //当做普通函数调用
 Person('Wind', 18);
 console.log(window.sayName());

 //在另一个作用域中调用
 var obj = new Object();
 Person.call(obj, 'bird', 100);
 console.log(obj.sayName());

构造函数优缺点

优点:可以将它的实例标识为一种特定类型

缺点:每个方法都要在每个实例上重新创建一遍。当然你也可以这样改:

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

改为调用全局函数,这样一来毫无封装性可言。。。接下来的原型模式可以弥补这个的不足

原型模式

 function Person(){

 }
 Person.prototype.name = 'Young';
 Person.prototype.age = 18;
 Person.prototype.sayName = function(){
 return this.name;
 }

 var person1 = new Person();
 console.log(person1.sayName());
 var person2 = new Person();
 console.log(person1.sayName());
 alert(person1.sayName === person2.sayName);
 //person1和person2访问的是同一组属性的同一个sayName()函数

虽然可以通过对象实例访问保存在原型中的值,但却不能通过实例对象重写原型中的值

 function Person(){

 }
 Person.prototype.name='Young';
 Person.prototype.age=18;
 Person.prototype.sayName=function(){
 return this.name;
 }

 var person1=new Person();
 var person2=new Person();
 person1.name='Wind';

 console.log(person1.sayName());//Wind
 console.log(person2.sayName());//Young
 alert(person1.sayName==person2.sayName);//true

在我们调用person1.sayName的时候,会先后执行两次搜索,解析器先确定实例person1是否有sayName的属性,有则调用自己的属性,没有则搜索原型中的属性。

 function Person(){

 }
 Person.prototype.name='Young';
 Person.prototype.age=18;
 Person.prototype.sayName=function(){
 return this.name;
 }

 var person1=new Person();
 var person2=new Person();

 person1.name='Wind';
 console.log(person1.sayName());//Wind
 console.log(person2.sayName());//Young

 delete person1.name;
 console.log(person1.sayName());//Young
 console.log(person2.sayName());//Young

使用hasOwnPropertyType方法可以检测一个属性是存在与原型中还是存在于实例中,该方法是从Object继承来的,实例中为true,原型中为false。

枚举对象上的实例属性用Object.keys()方法

 function Person(){

 }
 Person.prototype.name='Young';
 Person.prototype.age=18;
 Person.prototype.sayName=function(){
 return this.name;
 }

 var keys=Object.keys(Person.prototype);
 console.log(keys);//["name", "age", "sayName"]

原型模式优缺点

优点:不用每个方法都要在每个实例上重申一遍

缺点:很少有人单独使用原型模式地。。问题详列

 function Person(){

 }
 Person.prototype={
 constructor:Person,
 name:'Young',
 age:18,
 friends:['Big','Pig'],
 sayName:function(){
 return this.name;
 }
 };
 var p1=new Person();
 var p2=new Person();
 p1.friends.push('Mon');
 console.log(p1.friends);//["Big", "Pig", "Mon"]
 console.log(p2.friends);//["Big", "Pig", "Mon"]

正是因为实例一般都要有自己的属性,而我们这里将他放在了Person.prototype中,所以随着p1的修改,整个实例包括原型都修改了。那么,我们可以组合使用构造函数模式和原型模式。

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

 function Person(name,age){
 this.name=name;
 this.age=age;
 this.friends=['Big','Pig'];
 }
 Person.prototype={
 sayName:function(){
 return this.name;
 }
 };
 var p1=new Person('Young',18);
 var p2=new Person('Wind',78);
 p1.friends.push('Raganya');
 console.log(p1.friends);//["Big", "Pig", "Raganya"]
 console.log(p2.friends);//["Big", "Pig"]
 console.log(p1.friends==p2.friends);//false
 console.log(p1.sayName==p2.sayName);//true

这种模式是目前使用最广泛、认同度最高的一种创建自定义类型的方法。是用来定义引用类型的一种默认模式。

总结

以上就是关于分析Javascript中创建对象方式的全部内容,通过这篇文章为大家总结的四种方式和其优缺点,希望可以对大家学习使用Javascript能有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
对象
找不到对象的四种女生、四种女生不好找对象、四种技巧看足彩平局、创建对象的四种方式、低位吸筹时的四种技巧,以便于您获取更多的相关知识。

时间: 2024-11-02 11:17:57

详细分析Javascript中创建对象的四种方式_javascript技巧的相关文章

javascript中this的四种用法_javascript技巧

this 在函数执行时,this 总是指向调用该函数的对象.要判断 this 的指向,其实就是判断 this 所在的函数属于谁. 在<javaScript语言精粹>这本书中,把 this 出现的场景分为四类,简单的说就是: 有对象就指向调用对象 没调用对象就指向全局对象 用new构造就指向新对象 通过 apply 或 call 或 bind 来改变 this 的所指. 1) 函数有所属对象时:指向所属对象 函数有所属对象时,通常通过 . 表达式调用,这时 this 自然指向所属对象.比如下面的

javascript中创建对象的几种方式

原文:javascript中创建对象的几种方式 javascript中提供了通过Object构造函数或对象字面量方式来创建单个的对象,当我们想要创建很多对象的时候,简单的通过这两种方法就会产生大量的重复.在此,我总结了几种创建对象的模式.本文是在我阅读<javascript高级程序设计>后总结而来. 1.工厂模式 这种模式通过用函数来减少代码重复,利用函数的参数作为接口,与对象的属性与方法对接. function createfactory(name,age){ var obj = new O

javascript中类的定义方式详解(四种方式)_javascript技巧

本文实例讲述了javascript中类的定义方式.分享给大家供大家参考,具体如下: 类的定义包括四种方式: 1.工厂方式 function createCar(name,color,price){ var tempcar=new Object; tempcar.name=name; tempcar.color=color; tempcar.price=price; tempcar.getName=function(){ document.write(this.name+"-----"+

学习javascript面向对象 掌握创建对象的9种方式_javascript技巧

本文为大家分享了javascript创建对象的9种方式,供大家参考,具体内容如下 [1]使用Object构造函数 [缺点]使用同一个接口创建很多对象,会产生大量重复代码 var person = new Object(); person.name = "Nicholas"; person.age = 29; person.job = "Software Engineer"; person.sayName = function(){ alert(this.name);

javascript数组输出的两种方式_javascript技巧

本文实例讲述了javascript数组输出的两种方式.分享给大家供大家参考.具体如下: 遍历javascript数组,两种方式: 第一种: 复制代码 代码如下: <script language="javascript" type="text/javascript"> var str = "how are you today"; var arr = str.split(" "); for(var key in ar

JavaScript中创建对象和继承示例解读_javascript技巧

对象创建: 当一个函数对象被创建时候,Function构造器产生的函数对象会运行类似这样的代码: 复制代码 代码如下: this.prototype={constructor:this}; 假设函数F F用new方式构造对象时,对象的constructor被设置成这个F.prototype.constructor 如果函数在创建对象前修改了函数的prototype,会影响创建出来对象的construtor属性 如: 复制代码 代码如下: function F(){}; F.prototype={

javascript中创建对象的三种常用方法_javascript技巧

创建对象的三种方法 方法一: 复制代码 代码如下: var obj = new Object(); obj.属性 = 值; //继续添加其它属性 obj.方法 = function(参数) { //功能代码 } //继续添加其它方法 方法二: 复制代码 代码如下: var obj = { 属性:值 , //继续添加其它属性 , 方法: function(参数) { 功能代码 } , //继续添加其它方法 } 以上两种方法都是直接创建一个对象 方法三: 复制代码 代码如下: //先定义对象的模型,

如何用JavaScript动态呼叫函数(两种方式)_javascript技巧

近来的使用者,越来越强调 UI 介面的互动,渐渐原本对一条小龙来说只是配角的 JavaScript (以下简称 JS) 变成的主角,占了很大一块的用途. 像是最近很热门的 ASP.NET 的 MVC 里面就直接Include JQuery 可见一般. MVC 用了一阵子,一条小龙甚至感觉 MVC 中的 Controller 根本就是 JS 在控制的,这样怎么把 UI 工作独立,切给美工用,感觉也是蛮大的疑问. 看来后面的美工,只会绘图.拉画面是不行的,一定要会 JS.Flash 等等前端控制语言

浅谈Javascript事件处理程序的几种方式_javascript技巧

事件就是用户或浏览器自身执行的某种动作.比如说click,mouseover,都是事件的名字.而相应某个事件的函数就叫事件处理程序(或事件侦听器).为事件指定处理程序的方式有好几种. 一:HTML事件处理程序. 如: 复制代码 代码如下: <script type="text/javascript"> function show(){ alert('hello world!'); } </script> <input type="button&q