Javascript 对象和原型是一个重点难点,今天就总结一下 javascript 创建对象的几种方式
"继承"(原型指向)
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() 创建对象
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; // t
此种方法不同与构造函数,刚创建的对象只有原型中的默认值
基于 Object.create() 创建可初始化的对象
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);
构造函数
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
构造函数,并且创建共享函数,节省内存
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 操作
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
1. 不需要用 new 创建对象
2. 与 基于 Object.create() 创建可初始化的对象 的方式类似,但优点在于通过 JSON 作为参数,参数非常灵活,可以不传参数使用默认值
3. 参数没有顺序,传一个 JSON 对象即可
以上就是总结的几种创建对象的方法,注意对比它们之间的差别
资料参考来源:[廖雪峰的官方网站](http://www.liaoxuefeng.com)