js对象实例详解对象实例详解(JavaScript对象深度剖析对象深度剖析,深度理解深度理解js对象对象)
下面小编就为大家带来一篇js对象实例详解(JavaScript对象深度剖析,深度理解js对象)。小编觉得挺不错的,现
在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
这算是酝酿很久的一篇文章了。
JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕。
平时发的文章基本都是开发中遇到的问题和对最佳解决方案的探讨,终于忍不住要写一篇基础概念类的文章了。
本文探讨以下问题,在座的朋友各取所需,欢迎批评指正本文探讨以下问题,在座的朋友各取所需,欢迎批评指正:
1、创建对象
2、__proto__与prototype
3、继承与原型链
4、对象的深度克隆
5、一些Object的方法与需要注意的点
6、ES6新增特性
下面反复提到实例对象和原型对象,通过构造函数 new 出来的本文称作 实例对象,构造函数的原型属性本文称作 原型对象。
创建对象创建对象
字面量的方式字面量的方式:
var myHonda = {color: "red", wheels: 4, engine: {cylinders: 4, size: 2.2}}
就是new Object()的语法糖,一样一样的。
工厂模式工厂模式:
function createCar(){
var oTemp = new Object();
oTemp.name = arguments[0];
//直接给对象添加属性,每个对象都有直接的属性
oTemp.age = arguments[1];
oTemp.showName = function () {
alert(this.name);
};//每个对象都有一个 showName 方法版本
return oTemp;
};
var myHonda = createCar('honda', 5)
只是给new Object()包了层皮,方便量产,并没有本质区别,姑且算作创建对象的一种方式。
构造函数构造函数:
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.getName = function() {
return this.name;
};
}
var rand = new Person("Rand McKinnon", 33, "M");
上面构造函数的 getName 方法,每次实例化都会新建该函数对象,还形成了在当前情况下并没有卵用的闭包,所以构造函数
添加方法用下面方式处理,工厂模式给对象添加方法的时候也应该用下面的方式避免重复构造函数对象
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.getName = getName
}
function getName() {
return this.name;
};
构造函数创建对象的过程和工厂模式又是半斤八两,相当于隐藏了创建新对象和返回该对象这两步,构造函数内 this 指向新
建对象,没什么不同。
最大不同点: 构造函数创造出来的对象 constructor 属性指向该构造函数,工厂模式指向 function Object(){...}。