
正文
javascript创建对象,js对象的创建
提示:扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
js创建对象
因为createPerson函数的返回值是o
其中o.xxx等于传入的相应参数
person1 = createPerson()时,
函数内部把传入的参数赋给了o.xxx
然后通过函数createPerso的return,把o赋值给了person1
所以person1.xxx就等于person1 = createPerson()是传入的相应参数(拥有了函数内部给o定义的属性o.xxx)
相关问答
Q1: Javascript 怎么创建File对象
1、对已有对象进行扩充方法和属性
var object = new Object();
object.name = "zhangsan";//每个对象需要写这些语句
object.sayName = function(name){//每个对象需要写这些语句
this.name = name;
};
object.sayName("lisi");
alert(object.name);
2、工厂方式创建对象
function createObject() {
var object = new Object();
object.username = "zhangsan";
object.password = "123456";
object.get = function(){
alert(this.username + "," + this.password);
}
return object;
}
var object1 = createObject();
var object2 = createObject();
object1.get();
object2.get();
// 带参数的构造方法
function createObject(username, password){
var object = new Object();
object.username = username;
object.password = password;
object.get = function(){//缺点是,多少个对象则方法就有多少个
alert(this.username + ", " + this.password);
}
return object;
}
var object1 = createObject("zhangsan",123456);
object1.get();
// 最佳改进方式
function get(){//使该函数被多个对象共享
alert(this.username + ", " + this.password);
}
function createObject(username, password){//创建对象
var object = new Object();
object.username = username;
object.password = password;
object.get = get;
return object;
}
var object1 = createObject("zhangsan", "123456");
var object2 = createObject("wangwu", "654321");
object1.get();
object2.get();
3、构造函数方式创建对象
function Person(){
//在执行第一行代码欠,js引擎会为我们生成一个对象
this.username = "zhangsan";
this.password = "123";
this.getInfo = function(){
alert(this.username + ", " + this.password);
}
//此处有一个隐藏的return语句,用于将之前生成对象返回。
}
var p1 = new Person();
p1.getInfo();
//带参数
function Person(username, password){
this.username = username;
this.password = password;
this.getInfo = function(){
alert(this.username + ", " + this.password);
}
}
var p1 = new Person("zhangsan","1234546");
p1.getInfo();
4、原型(“prototype”)方式
function Person(){}
Person.prototype.username = "zhangsan";
Person.prototype.password = "123456";
Person.prototype.getInfo = function(){
alert(this.username + ", " + this.password);
}
var person = new Person();
var person2 = new Person();
person.username = "haha";
person.getInfo();
person2.getInfo();
//单纯使用原型方式定义对象无法在构造函数中为属性赋值,只能在对象生成后再去改变属性值
function Person(){}
Person.prototype.username = new Array();
Person.prototype.password = "123456";
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 = "321";
person.getInfo();
person2.getInfo();
5、综合方式(原型+构造函数方式搭配)
function Person(){
this.username = new Array();//不被多个对象共享
this.password = "123";
}
Person.prototype.getInfo = function()//被多个对象共享
{
alert(this.username + "," + this.password);
}
var p1 = new Person();
var p2 = new Person();
p1.username.push("zhangsan");
p2.username.push("lisi");
p1.getInfo();
p2.getInfo();
6、动态原型方式
function Person(){
this.username = "zhangsan";
this.password = "123";
//通过标志量让所有的对象共享方法
if(typeof Person.flag == "undefined"){
alert("prototype");
Person.prototype.getInfo = function() {
alert(this.username + ", " + this.password);
}
Person.flag = true;
}
}
var p = new Person();
var p2 = new Person();
p.getInfo();
p2.getInfo();
Q2: Web前端开发知识点之JavaScript对象
今天小编要跟大家分享的文章是关于Web前端开发知识点之JavaScript对象。真正从事web前端工作的小伙伴们来小编一起看一看吧,希望本篇文章能够对大家有所帮助。
1、Function对象
①对象的创建
Function对象的创建共有3种方法。
第一种方法格式如下,不符合我们写代码的习惯,不建议使用
varfun=newFunction(形式参数列表,方法体);
第二种方法格式如下:
function方法名称(形式参数列表){方法体}
第三种方法格式如下:
var方法名称=function(形式参数列表){方法体}
一般我们采用后两种方法进行Function对象的创建。
②对象的属性
·length属性代表形参的个数
③对象的特点
·方法定义时,形式参数的类型不用写,返回值类型也不写。
·方法是一个对象,如果定义名称相同的方法,会覆盖。
·在JavaScript中、方法的调用只与方法的名称有关,和参数列表无关
·在方法声明中有一个隐藏的内置对象(数组)arguments封装所有的实际参数
④对象的调用
方法名称(实际参数列表);
2、Array对象
①对象的创建
Array数组对象也有三种创建方式,三种格式如下所示:
vararr=newArray(元素列表);vararr=newArray(默认长度);vararr=[元素列表];
②对象的方法
Array对象有很多方法,下面介绍两个常用的方法:
join(参数):将数组中的元秦按照指定的分隔符拼接为字符串
push():向数组的末尾添加一个或更多元素,并返回新的长度。
③对象的属性
·length属性代表数组的长度
④对象的特点
在JavaScript中,数组元素的类型是可变的。
在JavaScript中,数组的长度是可变的。
3、Date对象
①对象的创建
vardata=newDate();
②对象的方法
Array对象有很多方法,下面介绍两个常用的方法:
toLocalestring():返回当前date对象对应的时间本地字符串格式
getTime():获取毫秒值。返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差
4、Math对象
①对象的创建
Math数学对象不用创建,可以直接使用,使用方式如下:
Math.方法名();
②对象的方法
Array对象有很多方法,下面介绍四个常用的方法:
random():返回0~1之间的随机数。含0不含1。
ceil(x):对数进行上取整。
floor(x):对数进行下取整。
round(x):对数进行四舍五入。
5、RegExp对象
在学习RegExp正则对象之前,我们首先来复习一下什么是正则表达式?正则表达式就是定义字符串的组成规则。
单个字符用[]表示。如:
[a]表示字符a
[a-z]表示a-z中的任一字符
还有一些特殊符号代表特殊含义的单个字符。例如:
\d表示单个数字字符=[0-9]
\w表示单个单词字符=[a-zA-Z0-9_]
量词符号用?、*、+、{m,n}表示。其中
·?:表示出现0次或1次
·*:表示出现0次或多次
·+:出现1次或多次
·{m,n}:表示m
§m如果缺省,即{,n}:最多n次
§n如果缺省,即{m,}:最少m次
①对象的创建
RegExp正则对象的创建有两种方法,我们一般采用第二种。
varreg=newRegExp("正则表达式");varreg=/正则表达式/;
②对象的方法
RegExp对象的常用方法只有一种:
test(参数):验证指定的字符串是否符合正则定义的规范
6、Global对象
①对象的创建
顾名思义,Global对象就是全局对象,这个Global中封装的方法不需要对象就可以直接调用。格式如下:
方法名();
②对象的方法
全局对象的方法有很多,下面简单介绍几种:
encodeURI():url编码
decodeURI():url解码
parseInt():将字符串转为数字。逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number
isNaN():判断一个值是否是NaN。NaN六亲不认,连自己都不认。NaN参与的==比较全部为false。
eval():将JavaScript转化为字符串,并把它作为脚本代码来执行。
以上就是小编今天为大家分享的关于Web前端开发知识点之JavaScript对象的文章,希望本篇文章能够对正在从事web前端学习和工作的小伙伴们有所帮助,想要了解更多web前端知识记得关注北大青鸟web培训官网,最后祝愿小伙伴们工作顺利,成为一名优秀的web前端工程师。
文章来源:原创凯哥的故事
Q3: Web前端工程师应该知道的JavaScript创建对象的方式
今天小编要跟大家分享的文章是关于Web前端工程师应该知道的JavaScript
创建对象的方式。JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产。下面小编为大家介绍一些非常经典的创建对象的方式,他们也各有优缺点。我们一起来看一看吧!
1、工厂模式
functioncreatePerson(name,job){varo=newObject()
o.name=name
o.job=job
o.sayName=function(){console.log(this.name)
}returno
}varperson1=createPerson('Jiang','student')varperson2=createPerson('X','Doctor')
可以无数次调用这个工厂函数,每次都会返回一个包含两个属性和一个方法的对象
工厂模式虽然解决了创建多个相似对象的问题,但是没有解决对象识别问题,即不能知道一个对象的类型
2、构造函数模式
functionPerson(name,job){this.name=namethis.job=jobthis.sayName=function(){console.log(this.name)
}
}varperson1=newPerson('Jiang','student')varperson2=newPerson('X','Doctor')
没有显示的创建对象,使用new来调用这个构造函数,使用new后会自动执行如下操作
·创建一个新对象
·这个新对象会被执行[[prototype]]链接
·这个新对象会绑定到函数调用的this
·返回这个对象
使用这个方式创建对象可以检测对象类型
person1instanceofObject//trueperson1instanceofPerson//true
但是使用构造函数创建对象,每个方法都要在每个实例上重新创建一次
3、原型模式
functionPerson(){
}
Person.prototype.name='Jiang'Person.prototype.job='student'Person.prototype.sayName=function(){console.log(this.name)
}varperson1=newPerson()
将信息直接添加到原型对象上。使用原型的好处是可以让所有的实例对象共享它所包含的属性和方法,不必在构造函数中定义对象实例信息。
原型是一个非常重要的概念,在一篇文章看懂proto和prototype的关系及区别中讲的非常详细
更简单的写法
functionPerson(){
}
Person.prototype={
ame:'jiang',
job:'student',
sayName:function(){console.log(this.name)
}
}varperson1=newPerson()
将Person.prototype设置为等于一个以对象字面量形式创建的对象,但是会导致.constructor不在指向Person了。
使用这种方式,完全重写了默认的Person.prototype对象,因此.constructor也不会存在这里
Person.prototype.constructor===Person//false
如果需要这个属性的话,可以手动添加
functionPerson(){
}
Person.prototype={
constructor:Person
ame:'jiang',
job:'student',
sayName:function(){
console.log(this.name)
}
}
不过这种方式还是不够好,应为constructor属性默认是不可枚举的,这样直接设置,它将是可枚举的。所以可以时候,Object.defineProperty方法
Object.defineProperty(Person.prototype,'constructor',{
enumerable:false,
value:Person
})
缺点
使用原型,所有的属性都将被共享,这是个很大的优点,同样会带来一些缺点
原型中所有属性实例是被很多实例共享的,这种共享对于函数非常合适。对于那些包含基本值的属性也勉强可以,毕竟实例属性可以屏蔽原型属性。但是引用类型值,就会出现问题了
functionPerson(){
}
Person.prototype={
ame:'jiang',
friends:['Shelby','Court']
}varperson1=newPerson()varperson2=newPerson()
person1.friends.push('Van')console.log(person1.friends)//["Shelby","Court","Van"]console.log(person2.friends)//["Shelby","Court","Van"]console.log(person1.friends===person2.friends)//true
friends存在与原型中,实例person1和person2指向同一个原型,person1修改了引用的数组,也会反应到实例person2中
4、组合使用构造函数模式和原型模式
这是使用最为广泛、认同度最高的一种创建自定义类型的方法。它可以解决上面那些模式的缺点
使用此模式可以让每个实例都会有自己的一份实例属性副本,但同时又共享着对方法的引用
这样的话,即使实例属性修改引用类型的值,也不会影响其他实例的属性值了
functionPerson(name){this.name=namethis.friends=['Shelby','Court']
}
Person.prototype.sayName=function(){console.log(this.name)
}varperson1=newPerson()varperson2=newPerson()
person1.friends.push('Van')console.log(person1.friends)//["Shelby","Court","Van"]console.log(person2.friends)//["Shelby","Court"]console.log(person1.friends===person2.friends)//false
5、动态原型模式
动态原型模式将所有信息都封装在了构造函数中,初始化的时候,通过检测某个应该存在的方法时候有效,来决定是否需要初始化原型
functionPerson(name,job){//属性
this.name=namethis.job=job//方法
if(typeofthis.sayName!=='function'){
Person.prototype.sayName=function(){console.log(this.name)
}
}
}varperson1=newPerson('Jiang','Student')
person1.sayName()
只有在sayName方法不存在的时候,才会将它添加到原型中。这段代码只会初次调用构造函数的时候才会执行。
此后原型已经完成初始化,不需要在做什么修改了
这里对原型所做的修改,能够立即在所有实例中得到反映
其次,if语句检查的可以是初始化之后应该存在的任何属性或方法,所以不必用一大堆的if语句检查每一个属性和方法,只要检查一个就行
6、寄生构造函数模式
这种模式的基本思想就是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新建的对象
functionPerson(name,job){varo=newObject()
o.name=name
o.job=job
o.sayName=function(){console.log(this.name)
}returno
}varperson1=newPerson('Jiang','student')
person1.sayName()
这个模式,除了使用new操作符并把使用的包装函数叫做构造函数之外,和工厂模式几乎一样
构造函数如果不返回对象,默认也会返回一个新的对象,通过在构造函数的末尾添加一个return语句,可以重写调用构造函数时返回的值
7、稳妥构造函数模式
首先明白稳妥对象指的是没有公共属性,而且其方法也不引用this。
稳妥对象最适合在一些安全环境中(这些环境会禁止使用this和new),或防止数据被其他应用程序改动时使用
稳妥构造函数模式和寄生模式类似,有两点不同:一是创建对象的实例方法不引用this,而是不使用new操作符调用构造函数
functionPerson(name,job){varo=newObject()
o.name=name
o.job=job
o.sayName=function(){console.log(name)
}returno
}varperson1=Person('Jiang','student')
person1.sayName()
和寄生构造函数模式一样,这样创建出来的对象与构造函数之间没有什么关系,instanceof操作符对他们没有意义。
以上就是小编跟大家分享的关于JavaScript
创建对象的方式的文章,希望本篇文章能够对正在从事web相关工作的小伙伴们有所帮助。想要了解更多web相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利!
*声明:内容与图片均来源于网络(部分内容有修改),版权归原作者所有,如来源信息有误或侵犯权益,请联系我们删除或授权事宜。
Q4: JavaScript创建对象的几种模式比较
第一种:Object构造函数创建
var Person = new Object();
Person.name = 'Nike';
Person.age = 29;
这行代码创建了Object引用类型的一个新实例,然后把实例保存在变量Person中。
第二种:使用对象字面量表示法
var Person = {};//相当于var Person = new Object();
var Person = {
name:'Nike';
age:29;
}
对象字面量是对象定义的一种简写形式,目的在于简化创建包含大量属性的对象的过程。也就是说,第一种和第二种方式创建对象的方法其实都是一样的,只是写法上的区别不同
在介绍第三种的创建方法之前,我们应该要明白为什么还要用别的方法来创建对象,也就是第一种,第二种方法的缺点所在:它们都是用了同一个接口创建很多对象,会产生大量的重复代码,就是如果你有100个对象,那你要输入100次很多相同的代码。那我们有什么方法来避免过多的重复代码呢,就是把创建对象的过程封装在函数体内,通过函数的调用直接生成对象。
第三种:使用工厂模式创建对象
function createPerson(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson('Nike',29,'teacher');
var person2 = createPerson('Arvin',20,'student');
在使用工厂模式创建对象的时候,我们都可以注意到,在createPerson函数中,返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。于是就出现了第四种创建对象的模式。
第四种:使用构造函数创建对象
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person('Nike',29,'teacher');
var person2 = new Person('Arvin',20,'student');
对比工厂模式,我们可以发现以下区别:
1.没有显示地创建对象
2.直接将属性和方法赋给了this对象
3.没有return语句
4.终于可以识别的对象的类型。对于检测对象类型,我们应该使用instanceof操作符,我们来进行自主检测:
alert(person1 instanceof Object);//ture
alert(person1 instanceof Person);//ture
alert(person2 instanceof Object);//ture
alert(person2 instanceof Object);//ture
同时我们也应该明白,按照惯例,构造函数始终要应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头。
那么构造函数确实挺好用的,但是它也有它的缺点:
就是每个方法都要在每个实例上重新创建一遍,方法指的就是我们在对象里面定义的函数。如果方法的数量很多,就会占用很多不必要的内存。于是出现了第五种创建对象的方法
第五种:原型创建对象模式
function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName();
使用原型创建对象的方式,可以让所有对象实例共享它所包含的属性和方法。
如果是使用原型创建对象模式,请看下面代码:
function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name ='Greg';
alert(person1.name); //'Greg' --来自实例
alert(person2.name); //'Nike' --来自原型
当为对象实例添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性。这时候我们就可以使用构造函数模式与原型模式结合的方式,构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性
第六种:组合使用构造函数模式和原型模式
function Person(name,age,job){
this.name =name;
this.age = age;
this.job = job;
}
Person.prototype = {
constructor:Person,
sayName: function(){
alert(this.name);
};
}
var person1 = new Person('Nike',20,'teacher');







