版权声明:本文为博主原创文章,随便转载,出处注明一哈 https://blog.csdn.net/u012551928/article/details/88388170
灵活的语言——javascript
从上到下灵活转变
//全局变量污染
function checkName(){}
function checkEmail(){}
//等同于
var checkName = function(){}
var checkEmail = function(){}
升级成一个对象
var CheckObject = {
checkName: function(){},
checkEmail: function(){}
}
//等同于 对象的另一种形式
var CheckObject = function(){}
CheckObject.checkName = function(){}
CheckObject.checkEmail = function(){}
写一个函数,返回一个对象,会不影响。
var CheckObject = function(){
return {
checkName: function(){},
checkEmail: function(){}
}
}
var a = CheckObject();
a.checkEmail();
优化,使用类
var CheckObject = function(){
this.checkName = function(){}
this.checkEmail = function(){}
}
var a = new CheckObject();
a.checkEmail();
使用类new新对象时,this中的属性和方法会被复制一遍,使用原型方式,减轻资源消耗,实现复用
var CheckObject = function(){};
CheckObject.prototype.checkName = function(){}
CheckObject.prototype.checkEmail = function(){}
var a = new CheckObject();
a.checkName();
a.checkEmail();
避免书写三遍a进行调用验证,可以在最后将当前对象返回
var CheckObject = function(){};
CheckObject.prototype.checkName = function(){
return this;
}
CheckObject.prototype.checkEmail = function(){
return this;
}
var a = new CheckObject();
a.checkName().checkEmail();
prototype.js:一款javascript框架,封装了很多方法,对原生对象的扩展。
一种添加方法的功能方法
// 链式添加
Function.prototype.addMethod = function(name,fn){
this[name] = fn;
return this;
}
var methods = function(){};
methods.addMethod('checkName', function(){
return this;
}).addMethod('checkEmail', function(){
return this;
})
// 链式使用
methods.checkName().checkEmail();
原型方式
// 链式添加
Function.prototype.addMethod = function(name,fn){
this.prototype[name] = fn;
return this;
}
var methods = function(){};
methods.addMethod('checkName', function(){
return this;
}).addMethod('checkEmail', function(){
return this;
})
// 链式使用
var m = new methods();
m.checkName().checkEmail();
面向对象编程
面向对象编程:将需求抽象成一个对象,然后针对这个对象分析其特征(属性)与动作(方法)。
(记得Java中的)特点:封装,继承,多态。扫描二维码关注公众号,回复: 5534829 查看本文章
new对象实例化,只对类执行一次,类内部this定义的属性和方法,复制到新创建的对象中。
类内部,声明的方法和属性称为类的私有属性和私有方法
类内部,this定义的方法和属性称为类的公有属性和公有方法,
其中类的公有方法=可外部访问+访问私有属性方法+访问共有属性方法+访问私有属性方法称为特权方法,
其中类的公有方法=用于初始化对象属性的称为构造器
类外面,点语法定义的属性和方法称为类的静态共有属性和静态共有方法
var Book = function(id, name, price){
// 私有属性
var num = 1;
// 私有方法
function checkId(){};
// 特权方法
this.setName = function(name){
this.name = name;
}
// 对象公有属性
this.id = id;
// 对象公有方法
this.copy = function(){};
// 构造器
this.setName(name)
}
// 静态公有属性(对象不能访问)
Book.isChinese = true;
// 静态公有方法(对象不能访问)
Book.resetTime = function(){}
// 原型公有属性和方法
Book.prototype = {
isJSBook: false,
display: function(){}
}
var b = new Book(11,'javascript 设计模式', 50)
console.log(b.num) // undefined 私有属性和方法无法访问
console.log(b.isJSBook) // false
console.log(b.id) // 11
console.log(b.isChinese) // undefined 类静态共有属性和方法无法访问
console.log(Book.isChinese) // true 通过点语法直接访问。
闭包
闭包:有权访问另一个函数作用域中变量的函数。即一个函数内部创建一个函数。```
// 利用闭包实现,自调用函数
var Book = (function(){
// 私有属性
var bookNum = 1;
// 私有方法
function checkId(){};
// 创建类
function _book(newId, newName, newPrice){
// 私有变量
var name, price;
// 私有方法
function checkId(id){};
// 特权方法
this.getName = function(){}
this.getPrice = function(){}
this.setName = function(){}
this.setPrice = function(){}
// 公有属性
this.id = newId;
// 公有方法
this.copy = function(){};
bookNum++;
if(bookNum>160)throw new Error('我们仅出版100本书。')
// 构造器
this.setName(name);
this.setPrice(price);
}
// 构造原型
_book.prototype = {
// 静态公有属性
isJSBook: false,
// 静态公有方法
display: function(){}
}
// 返回类
return _book
})()
var c = new Book(12,'Tom',1200)
console.log(c.id) // 12;
console.log(c.isJSBook) // false;
创建对象的安全模式
直接实例对比:
不安全模式,如果忘记new ,则增加全局污染。如下:
// 图书类
var Book = function(title, time, type){
this.title = title;
this.time = time;
this.type = type;
}
// 实例化一本书 , 少了new
var book = Book('javascript', '2014', 'js');
console.log(book) // undefined
// 缺失new 作为函数调用,this指向window全局。所以全局污染。
// 全局污染
console.log(title) // javascript
console.log(time) // 2014
console.log(type) // js
安全模式下的实现。如下:
var Book = function(title, time, type){
// 判断this是否指向当前对象,如果是则执行初始化
if(this instanceof Book){
this.title = title;
this.time = time;
this.type = type;
}else{
// 否则,实例化操作。
return new Book(title, time, type)
}
}
var book = new Book('javascript', '2014', 'js');
console.log(book) // Book {title: "javascript", time: "2014", type: "js"}
console.log(book.title) // javascript
console.log(title) // undefined
未完待续。。。