js之oop <一> 创建对象,构造器(class)

时间:2023-03-09 18:32:36
js之oop <一> 创建对象,构造器(class)

js中除了基本类型,就是对象。可以说在js中处处皆对象。

由于js是弱语言,在编写的过程中很容易混淆 objectclass 也就是对象构造器

object(对象):一般对象都由var关键字声明。

class(构造器):js中function除了声明函数,也可以声明构造器。故构造器是特殊的函数。

创建对象:

常见创建对象的方法有两种。

(1)对象字面量

var obj = { a:1, b:2 };  obj.a; //输出1

对象字面量创建的对象中也可以嵌套对象

var obj = { a:1, b:2, c:{ cx:3, cy:4 } }; obj.c.cx; //输出3

字面量构造对象函数

var obj = {
a:1,
b:2,
//创建对象函数
add(){
return this.a + this.b;
},
//函数重写
add(x,y){
return x + y;
}
};
obj.add(obj.a,obj.b); //输出3
obj.add(); //输出3

注意:的是对象字面量创建出的并不是class(类)而是object(对象),所以字面量创建的对象不可以当做class去new。

var obj = { a:1, b:2 };  var obj_o = new obj(); //报错

(2)构造器创建对象。(class new object)

构造器创建对象,首先创建构造器(class)。这和其他语言的class new object同理。

创建构造器:

1、function创建构造器

function obj(){ }; //构造器
var obj_1 = new obj(); //创建对象

js中function可以作为函数也可以作为构造器。

2、Constructor创建构造器

    function obj(){
this.name = "obj_name";
this.from = "obj_china";
this.say = function(){ console.log("my name is " + this._name + "I'm from " + this.from); }
} var obj_1 = new obj();
obj_1.say(); //输出“my name is undefinedI'm from obj_china”

Constructor创建构造器是用this关键字预先设定了一些属性和函数,以供class下的对象使用。

Constructor和工厂作用差不多,缺点就是每次创建一个对象就会调用一次工厂,浪费内存。

3、prototype创建构造器

    function obj(){}
obj.prototype._name = "obj_name";
obj.prototype.hobby = "obj_hobby";
obj.prototype.arr = new Array();
var obj_1 = new obj();
var obj_2 = new obj();
obj_1.arr.push("one");
obj_2.arr[0] //输出 one

缺点一旦修改原型属性,原型链上对象的属性都会被修改。

原型构造器,通过prototype定义一些属性和函数,通过原型构造器创建的每个对象都共用prototype定义的这些属性和函数。