最初我们写js代码的时候是这么写
function checkName(){
}
function checkEmail(){
}
function checkPassword(){
}
这种方式会造成全局变量的严重污染,再过渡到
var checkObject = {
checkName : function(){};
checkEmail: function(){};
checkPassword: funcion(){};
}
var checkObject = {}
checkObject.checkName = function(){};
checkObject.checkEmail = function(){};
checkObject.checkPassword = function(){};
以上是直接使用,而不是新建对象复制一份的,复制一份的话可以这么写
var checkObject = function(){
return {
checkName:function(){},
checkEmail:function(){},
checkPassword:function(){}
}
}
var a = checkObject();
a.checkName();
这么写可以实现对象的复制 但是这不符合面向对象,新创建的类和checkObject 没有任何关系
于是我们可以采用构造函数的方式书写代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
var checkObject = function(){
this.checkName = function(){}
this.checkEmail = function(){}
this.checkPassword = function(){}
}
var checkObject = function(){};
checkObject.prototype.checkName = function(){};
var checkObject = function(){};
checkObject.prototype={
checkName:function(){
return this;
},
checkEmail:function(){
return this
},
checkPassword:function(){
return this;
}
}
new checkObject().checkName().checkEmail().checkPassword();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
下面再来介绍一下面向对象和面向过程两种编程方式 .page 10
多个function 书写的方式是一种面向过程书写代码的实现方式,添加了很多全局变量而且不利于别人复用,在别人使用时你也不可修改,我们可以改用面向对象方式来重写,我们把需求抽成一个对象,这个对象称之为类,面向对象一个重要特点就是封装,将属性和方法封装在一个对象中,就像将物品放在一个旅行箱中,这样不管是使用和管理我们都方便,(虽然有时候感觉直接拿在外边摆放也很方便,但是东西一多便不利于管理)
var Book = (function () {
var bookNum = 0;
function checkBook() {
}
return function (newId, newName, newPrice) {
var name, price;
function checkId(id) {
}
this.getPrice = function () {
};
this.getName = function () {
};
this.setName = function (name) {
this.name = name
};
this.setPrice = function () {
};
this.id = newId;
this.copy = function () {
};
bookNum++;
if (bookNum > 100)
throw new Error('oop javascript');
this.setName(name);
this.setPrice(price);
}
})();
Book.prototype = {
isJSBook: false,
display: function () {
}
};
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
//为了看起来更像一个类 我们将原型上的方法 写到类里边
var Book = (function () {
var bookNum = 0;
function checkBook() {
}
function _Book(newId, newName, newPrice) {
var name, price;
function checkId(id) {
}
this.getPrice = function () {
};
this.getName = function () {
};
this.setName = function (name) {
this.name = name
};
this.setPrice = function () {
};
this.id = newId;
this.copy = function () {
};
bookNum++;
if (bookNum > 100)
throw new Error('oop javascript');
this.setName(name);
this.setPrice(price);
}
_Book.prototype = {
isJSBook: false,
display: function () {
}
};
return _Book;
})();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
下面再介绍一种创建对象的安全模式
var Book = function (title) {
if (this instanceof Book) {
alert(1);
this.title = title;
}else{
return new Book(title);
}
};
var book = new Book('js');
alert(book.title);