js面向对象

最近在一家创业公司写代码,发现脚本里的变量都是这样的

虽说这是我第一份工作,但这着实让我捏了一把汗,什么都是全局的,并且这些大量的全局变量都是没有注释的。维护起来非常的令人头疼。

这样定义变量非常的糟糕,没有任何模块和对象的概念,如果这个变量不是自己定义的,你通常会不知道这个变量的干什么的。多人的时候一人在这里定义一个他自己才知道变量,那真的是要命。

以项目里面简单的分页我们来看一下。

这个分页里面涉及到三个全局变量,pageNum,current,PageIndex,如果你不知道这三个变量的干什么的,没问题,我们只需要知道这个分页要工作起来,需要给这三个变量赋值,

分页通常都是需要更新的,比如我执行搜索的时候,这时后分页就会产生变化,

当我想更新分页的时候,这时候我又要找到这几个全局变量,给它赋值。当这种变量多起来的时候是非常糟糕难维护的。

所以我们要尝试把这些变量封装起来,封装到分页对象里面去。这也是面向对象的一个特点,把属性和方法封装起来。

当然我们还可以这么做让pageCode实现的更有封装的味道

这样方法和属性都包括在对象里面了。这大概就是js的面向对象吧,当你百度搜索js面向对象的时候,出来的文章大都是都是介绍各种工厂模式,单例模式,混杂模式什么的,

其实我感觉对新手来说没什么意义。上面列出来的两种写对象的形式也是其中的,原型模式,和动态原型模式

这样就就解决了变量泛滥的问题了。我们实现这个分页只用了一个全局的pageCode构造函数。

如果你并不了解js那么你可能会问pageCode里面的this是什么,prototype是什么,prototype里面的this又是什么;

如果单纯的回答pageCode里面的this指向什么,我可以告诉你指向window,为什么this指向window,最后new出来的对象可以
以对象点的形式调用?这时候我们就需要知道new的时候js到底为我们做了什么了。

书上是这么说的:如果在一个函数前面带上new来调用该函数,那么将创建一个隐藏连接到该函数的prototype成员的新对象,同时this将被绑定到那个新对象上;

js在new的过程中产生一个新对象,

var page2={};

每个对象都有一个__proto__属性,指向该对象的构造函数的原型,(函数对象除外,函数对象有个prototype属性);

var page2=new Object(),我们的对象通常也可以这么创建。

结合上面两句话,console.log(page2.__proto__===Object.prototype);//true;
那么这种关系也就好理解了。

我们的page2对象要继承pageCode里面的属性和方法;那么下一步我们是不是应该把 page2.__proto__的指向修改一下了?
page2.__proto__=pageCode.prototype;

最后我们在调用pageCode函数,把里面的this指向page2,并且传入参数

pageCode.apply(obj,[id,10,1]);

当然我们也可以这么写;

pageCode.call(obj,id,10,1);

正也是这一步,我们修改了pageCode里面的this指向,

至于call和apply是干什么的这里不多赘述了,call和apply是函数4种调用方式中的一种,能改变函数的this指向;

写个小例子,


var color="red";
或者
window.color="red";

var obj={
color:"blue"
}
var func=function(){
console.log(this.color)
}
func()//red
func.apply(obj,null) //blue;

原文地址:https://www.cnblogs.com/luojianjian/p/7544121.html