JavaScript 中所有数据都可以被视为对象,每个对象都有其属性和 方法
- 对象的属性如:字符串的长度(
.length
)、文字框里的文字(.value
) - 对象的方法 如:表单的提交(
Submit
),窗口的滚动(Scrolling
)
创建对象方法
创建一个Object实例
let animal = new Object();
animal.type = 'dog';
animal.say = function(){
console.log('I am a ' + this.type);
}
对象字面量创建
let Animal= {
type: 'dog',
say: function(){
console.log('I am a ' + this.type);
}
}
这种方式,虽然解决了对象实例化代码重复的问题,但却无法知道对象的类型
构造函数模式
function Animal(name, type){
this.name = name;
this.type = type;
this.say = function(){
console.log('I am a ' + this.type);
}
}
let dog = new Animal('WangWang', 'dog');
dog.say();
dog
是一个Animal
实例,并且有一个叫做constructor
的属性指向了Animal
这个构造函数
构造函数与普通函数的唯一区别在与调用方式不同,构造函数以
new Animal()
方式来调用,且函数名通常使用大写字母-
构造函数有三个特征
- 没有显式地创建对象
new Object();
- 直接将属性和方法赋给了
this
- 没有
return
语句
- 没有显式地创建对象
new操作符具体干了什么呢
var obj = {}; //创建一个对象
obj.__proto__ = Base.prototype;
Base.call(obj);
使用构造函数虽然解决了类型的问题,但是多个实例会创建多个函数对象,增加内存消耗,而且不同实例上的同名函数是不相等的,为了解决这个问题,我们便引入了原型模式
原型模式
function Person(){
...
}
Person.prototype.name = "hello";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName(); //hello
//或者
Person.prototype = {
constructor : Person,
name : "jiangshui",
sayName : function(){
alert(this.name);
}
};
第二种方法覆盖了原有的prototype
对象,所以需要手动指定 constructor
属性指向构造函数,否则会指向Object
function Person(){}
Person.prototype = {
constructor : Person,
friends : ["greg","jack"]
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("tom");
console.log(person2.friends); //["greg", "jack", "tom"]
原型模式不是万能的,在给person1的属性赋值时,影响了person2,person2也可以访问到这个属性
组合使用构造函数模式和原型模式
- 构造函数模式用于定义实例属性,原型模式用于定义方法和共享属性,所以,每个实例都会有自己的一份实例属性副本,同时又共享着对方法的引用
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["greg","jack"];
}
Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
};
var person1 = new Person();
var person2 = new Person();
console.log(person1.friends); //["greg", "jack"]
person1.friends.push("tom");
console.log(person2.friends); //["greg", "jack"]