Web前端技术分享之面向对象基础知识点梳理

面向对象对于每一个Web前端人员来说都是必须要掌握的知识点，接下来千锋石家庄小编就给大家简单分享面向对象中的部分基础知识。

面向对象的语言有一个标志，那就是类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。

创建对象

创建一个对象，然后给这个对象新建属性和方法。

var box = new Object(); //创建一个 Object对象

box.name = ‘Lee’;//创建一个 name属性并赋值

box.age = 100;//创建一个 age属性并赋值

box.run = function () {//创建一个 run()方法并返回值

return this.name + this.age + ‘运行中…’;

};

alert(box.run());//输出属性和方法的值

上面创建了一个对象，并且创建属性和方法，在 run()方法里的this，就是代表 box对象本身。这种是 JavaScript创建对象最基本的方法，但有个缺点，想创建一个类似的对象，就会产生大量的代码。

为了解决多个对象声明的问题，我们可以使用一种叫做工厂模式的方法，这种方法就是为了解决实例化对象产生大量重复的问题。

function createObject(name, age) { //集中实例化的函数

var obj = new Object();

obj.name = name;

obj.age = age;

obj.run = function () {

return this.name + this.age

};

return obj;

var box1 = createObject(‘Lee’, 100);//第一个实例

var box2 =createObject(‘Jack’,200);//第二个实例

alert(box1.run()); //Lee100

alert(box2.run()); //Jack200

工厂模式解决了重复实例化的问题，但还有一个问题，那就是识别问题，因为根本无法判断某个实例的类型。

ECMAScript中可以采用构造函数(构造方法)，可用来创建特定的对象。可以把构造函数看成是某个类型。

function Box(name, age) {//构造函数模式

this.name = name;

this.age = age;

this.run = function () {

return this.name + this.age + ‘运行中…’;

};

var box1 = new Box(‘Lee’, 100);

var box2 = new Box(‘Jack’,200);

alert(box1.run());alert(box1 instanceof Box); //很清晰的识别他从属于 Box

使用构造函数的方法，既解决了重复实例化的问题，又解决了对象识别的问题。

使用构造函数和使用工厂模式不同之处如下：

构造函数方法没有显示的创建对象(new Object())；

直接将属性和方法赋值给 this 对象；

没有 renturn 语句。

构造函数的方法有一些规范：

函数名和实例化构造名相同且大写，(PS：非强制，但这么写有助于区分构造函数和普通函数)；

通过构造函数创建对象，必须使用 new 运算符。既然通过构造函数可以创建对象，那么这个对象是哪里来的，new Object()在什么地方执行了？执行的过程如下：

当使用了构造函数，并且 new 构造函数()，那么就后台执行了 new Object()；

将构造函数的作用域给新对象，(即 new Object()创建出的对象)，而函数体内的 this 就代表 new Object()出来的对象。

执行构造函数内的代码；

返回新对象(后台直接返回)。

关于 this 的使用，this 其实就是代表当前作用域对象的引用。如果在全局范围 this 就代表 window 对象，如果在构造函数体内，就代表当前的构造函数所声明的对象。

var box = 2;alert(this.box); //全局，代表 window构造函数和普通函数的唯一区别，就是他们调用的方式不同。只不过，构造函数也是函数，必须用new运算符来调用，否则就是普通函数。

var box = new Box(‘Lee’, 100); //构造模式调用

alert(box.run());Box(‘Lee’, 20); //普通模式调用，无效

var o = new Object();虽然构造函数创建对象可以使用全局的函数 ，但这种方式又带来了一个新的问题，全局中的this在对象调用的时候是Box本身，而当作普通函数调用的时候，this 又代表window。

以上就是我分享的面向对象中的部分基础知识。希望本文的分享对小伙伴们学习Web前端有所帮助！了解更多Web前端入门知识点，你可以关注我，定期发布技术热点和行业趋势文章。