这篇文章主要介绍了 javascript 创建对象的 3 种方法, 对比分析 js 创建对象三种方式的优缺点,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
第一种创建对象的方式:
创建 JSON 对象 推荐使用的场合: 作为函数的参数,临时只用一次的场景。比如设置函数原型对象。
- var object = {
- name: "Eric",
- age: 24,
- sayHi: function(){
- console.log("My name is "+ this.name + " this year is " + this.age + "years old.")
- }
- };
第二种创建对象的方式:
创建一个 Object 对象
- var object = new Object();
- object.name = "Eric";
- object.age = 24;
- object.sayHi = function(){....};
以上两种创建对象方式的缺点: 不能作为对象创建的模板,也就是不能用 new 进行构造新对象。
第三种创建对象的方式:
- function Person() {
- this.name = "Eric";
- this.age = 24;
- this.sayHi = function(){
- console.log(this.name);
- }
- }
- var object1 = new Person();
- var object2 = new Person();
这种创建对象方式解决了前两种方式的缺点,可以作为对象创建的模板,可以一直复用创建出多个对象。
new 运算符的作用:
执行构造函数(new 后面的那个函数),在构造函数内部创建一个空对象 把上一部创建的空对象跟构造函数的原型对象进行关联 然后把 this 指向当前空对象 在构造函数执行结束后,如果没有 return,把空对象返回给 object
new 运算符原理
第三种方式有个缺点: 对象的内部的函数会在每个对象中都存一份如果创建的对象非常多的话,那么非常浪费内存。函数的行为是所有对象可以共有,不需要每个对象都保存一份。所以,可以把函数放到原型中进行声明,那么所有对象都有了公共的函数,而且内存中只保留一份。所有的属性写到对象的内部
第三种方式 beta1:
- function Person() {
- this.name = 'Eric';
- this.age = 24;
- }
- Person.prototype = {
- sayHi: function() {
- },
- };
- var object1 = new Person();
- var object2 = new Person();
继续升级 beta2 :
- function Person(name,age) {
- this.name = name || "";
- this.age = age || "";
- }
- Person.prototype = {
- sayHi: function() {
- },
- };
- var object1 = new Person(name1,age1);
- var object2 = new Person(name2,age2);
问题:1、调用者如果传递参数的顺序发生变化,那么废了 问题:2、参数增减都会导致函数声明变化,调用的地方也可能发生变化。
如何解决:继续升级 beta3 :
- function Person(option) { //用一个对象把所有参数覆盖
- this.name = option.name || "";
- this.age = option.age || "";
- }
- Person.prototype = {
- sayHi: function() {
- },
- };
- var object1 = new Person({
- name: "Eric",
- age: 24
- });
- var object2 = new Person({
- name: "XXX",
- age: xx
- });
继续优化,把初始化的代码 放到 init 函数中
继续升级 beta4 :
- function Person(option) {
- this._init(option);
- }
- Person.prototype = {
- _init: function (option){
- this.name = option.name;
- this.age = option.age;
- },
- sayHi: function(){
- console.log("HI");
- }
- };
- var object1 = new Person({
- name: "Eric";
- age: 24
- });
- object1.sayHi();
来源: http://www.phperz.com/article/17/0521/330718.html