网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于javascript对象声明有几种方式?javascript对象声明的六种方式 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
-- 新手向知识,就不用ES6写法了。
一、字面量声明
var obj = {
属性名1 : 属性值,
属性名2 : 属性值,
属性名3 : 属性值,
方法名1 : function() {
.....
},
方法名2 : function() {
.....
}
}
通过obj.属性名
或obj.方法名()
就可以读取或调用对象的属性/方法了。
二、用new操作符构造Object对象
var obj = new Object();
obj.属性名1 = 属性值1;
obj.属性名2 = 属性值2;
obj.属性名3 = 属性值3;
obj.属性名4 = 属性值4;
obj.方法名1 = function() {
....
};
obj.方法名2 = function() {
....
};
....首先用new Object()
创建一个空对象,然后用多条语句给对象添加属性/方法。
三、用函数声明的方式构造对象
函数Function
本身就是对象Object
的实例
var fn = new Function(); //new一个空函数
function myFn() {}; //声明一个空函数
console.log(fn instanceof Object); //true
console.log(myFn instanceof Object); //true所以可以模仿new Objcet()
构造对象的方式,用function myFn() {}
声明一个自定义的函数,然后通过new myFn()
构造对象,比如:
function person(name, age) {
this.name = name;
this.age = age;
this.say = function() {
console.log('My name is '+ this.name + ', I\'m ' + this.age + ' years old');
}
}
var xiaoMing = new person('xiaoming', 16);
xiaoMing.say(); //"My name is xiaoming, I'm 16 years old"通过这种方式声明的对象,每一次new
出来的对象都是独立的,互相不会有影响,属性、方法中的this
指向的就是新创建的、调用他们的对象。
四、工厂模式声明对象
工厂模式声明对象可以理解成二、三两种方法的结合体,用三的思想套进二的内容。仿照上面例子举例:
function person(name, age) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.say = function() {
console.log('My name is '+ obj.name + ', I\'m ' + obj.age + ' years old');
};
return obj;
}
var xiaoMing = person('xiaoming', 16);
xiaoMing.say(); //"My name is xiaoming, I'm 16 years old"
var xiaoHong = person('xiaohong', 18);
xiaoHong.say(); //"My name is xiaohong, I'm 18 years old"工厂模式之所以叫工厂模式,就是类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果。他的写法与三、用函数声明的方式构造对象
比较像,但是稍有不同。
每一次调用function
声明的函数时,它在内部new Object()
,最后将这个新建的对象return
回来,调用时就像普通函数调用一样,实例化的时候不用再new
了(内部new过)。虽然多次调用该函数走的都是一样的流程,但是生产出来的两个产品互不影响。
五、原型方式声明对象
function person() {/*空*/};
person.prototype.height = "1.80m";
person.prototype.grade = "Senior 3";
person.prototype.say = function() {
console.log( 'I\'m ' + this.height + ' tall and I\'m in '+ this.grade);
}
var xiaoMing = new person();
xiaoMing.say(); //"I'm 1.80m tall and I'm in Senior 3"原型方式是将该对象的属性/方法写在他的prototype
属性所指的对象上。(每一个函数或者说对象都有一个prototype
属性,这个属性以对象的形式存在)。
每次new
实际上有这么一些操作:
1)创建一个空对象
2)把这个空对象的__proto__
指向构造函数的prototype
3)把这个空对象赋值给this
4)执行构造函数内的代码
new
出来的新对象的__proto__
属性都会指向person.prototype
,然后就可以执行person.prototype
上的函数内容了。
这有点像JS上常说的事件代理/委托。事件不直接绑定在该DOM元素上,而是绑定在它的父级元素,当给该DOM元素添加兄弟元素时,兄弟元素因为冒泡,能触发相同的事件。
六、混合模式
混合模式可以理解成原型模式+构造函数,举例:
function person(name, height) {
this.name = name;
this.height = height;
};
person.prototype.age = 18;
person.prototype.grade = "Senior 3";
person.prototype.say = function() {
console.log('Hello, my name is ' + this.name + '. I\'m ' + this.age + ' years old, ' + this.height + ' tall and I\'m in '+ this.grade + '.');
}
var xiaoMing = new person('Xiaoming', '1.80m');
xiaoMing.say();
//"Hello, my name is Xiaoming. I'm 18 years old, 1.80m tall and I'm in Senior 3."
var xiaoHong = new person('Xiaohong', '1.65m')
xiaoHong.say();
//"Hello, my name is Xiaohong. I'm 18 years old, 1.65m tall and I'm in Senior 3."对比混合模式和原型模式可以发现,混合模式函数体不是空的,而函数体内的内容就是前边说的构造方式。
这种方式在实际开发中更加常用。
相关推荐:
JavaScript下申明对象的几种方法小结_javascript技巧
基于JavaScript 声明全局变量的三种方式详解_基础知识
以上就是javascript对象声明有几种方式?javascript对象声明的六种方式的详细内容,更多请关注php中文网其它相关文章!
网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
关键词:javascript对象声明有几种方式?javascript对象声明的6种方式