Fork me on GitHub

javascript 创建对象的方法

Javascript 对象和原型是一个重点难点,今天就总结一下 javascript 创建对象的几种方式


“继承”(原型指向)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var Student = {
name : "Robot",
height : 1.2,
run:function(){
console.log(this.name + " is running");
}
};
var xiaoming = {
name : "小明"
};
xiaoming.__proto__ = Student;
console.log(xiaoming.name); //小明
xiaoming.run(); // 小明 is running
  1. 通过指定 xiaoming 的原型, 看上去 xiaoming 仿佛是从 Student 继承下来的

  2. JavaScript 的原型链和 Java 的 Class 区别就在,它没有 “Class” 的概念,所有对象都是实例,所谓继承关系不过是把一个对象的原型指向另一个对象而已

  3. 在编写 JavaScript 代码时,不要直接用 obj.__proto__ 去改变一个对象的原型,并且,低版本的 IE 也无法使用 __proto__


使用 Object.create() 创建对象

1
2
3
4
5
6
7
8
9
10
11
12
13
var Student = {
name : "Robot",
height : 1.2,
run:function(){
console.log(this.name + "is running");
}
};
var xiaoming = Object.create(Student);
xiaoming.name = "小明";
console.log(xiaoming.name);//小明
console.log(Student.name);//Robot
xiaoming.__proto__ === Student; // true

此种方法不同与构造函数,刚创建的对象只有原型中的默认值


基于 Object.create() 创建可初始化的对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var Student = {
name: 'Robot',
height: 1.2,
run: function () {
console.log(this.name + ' is running...');
}
};
function createStudent(name){
var stu = Object.create(Student);
stu.name = name;
return stu;
}
var xiaoming = createStudent("小明");
xiaoming.run();
console.log(xiaoming.name);

构造函数

1
2
3
4
5
6
7
8
9
10
function Student(name){
this.name = name;
this.hello = function(){
alert('hello,' + this.name + '!');
}
}
var xiaoming = new Student('小明');
xiaoming.hello();
console.log(xiaoming.name);
  1. 通过 new 关键字创建对象并且可以初始化值
  2. 如果不写 new,这就是一个普通函数,它返回 undefined。但是,如果写了 new,它就变成了一个构造函数,它绑定的 this 指向新创建的对象,并默认返回 this,也就是说,不需要在最后写 return this;
  3. 原型链: xiaoming ----> Student.prototype ----> Object.prototype ----> null

构造函数,并且创建共享函数,节省内存

1
2
3
4
5
6
7
8
9
10
11
function Student(name){
this.name = name;
}
Student.prototype.hello = function(){
console.log('hello' + this.name + '!');
}
var xiaoming = new Student('小明');
xiaoming.hello();
console.log(xiaoming.name);
  1. Student.prototype 是所有 Student 实例的共同原型,所以将方法定义在它上面
  2. 如果写在构造函数里面,每创建一个实例,每个函数也会开辟内存

创建对象忘记写关键字 new 如何应对

  1. strict 模式下,this.name = name将报错,因为 this 绑定为 undefined,在非 strict 模式下,this.name = name 不报错,因为 this 绑定为 window,于是无意间创建了全局变量name,并且返回 undefined,这个结果更糟糕。
  2. 封装 new 操作

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    function Student(obj){
    this.name = obj.name || '匿名';
    this.grade = obj.grade || 1;
    }
    Student.prototype.hello = function(){
    console.log('hello' + this.name + '!');
    }
    function createStudent(obj){
    return new Student(obj || {});
    }
    var xiaoming = createStudent({name:'小明'});
    console.log(xiaoming.name);//小明
    console.log(xiaoming.grade);//1
  3. 不需要用 new 创建对象

  4. 与 基于 Object.create() 创建可初始化的对象 的方式类似,但优点在于通过 JSON 作为参数,参数非常灵活,可以不传参数使用默认值
  5. 参数没有顺序,传一个 JSON 对象即可

以上就是总结的几种创建对象的方法,注意对比它们之间的差别

资料参考来源:廖雪峰的官方网站

本文标题:javascript 创建对象的方法

文章作者:Leo

发布时间:2017年09月30日 - 10:09

最后更新:2017年10月21日 - 12:10

原始链接:http://www.leozzy.com/2017/09/30/javascript创建对象的方法/

许可协议: 转载请保留原文链接及作者。

坚持原创技术分享,您的支持将鼓励我继续创作!
-------------本文结束 感谢您的阅读-------------