写了几篇Vue入门的内容了&＃xff0c;今天写点其它的放松一下&＃xff0c;简单讲讲Javascript中的面相对象。
在面向对象的语言中&＃xff0c;都有类的概念&＃xff0c;当然es6中开始Javascript中也有类的概念了&＃xff0c;这里以es5为基础开始讲解&＃xff0c;毕竟当前即使写的es6代码&＃xff0c;一般还是会通过babel等转码器翻译到es5来执行的&＃xff1b;
在js中虽然没有类的概念&＃xff0c;但是我们却可以创建对象&＃xff0c;一般创建对象有两种方式&＃xff08;这里指自定义对象&＃xff09;&＃xff1a;
1、使用构造函数
function Person(){}var p&＃61;new Person();
2、使用字面量
var p&＃61;{//各种属性
}
这里着重介绍一下构造函数方式创建对象&＃xff1b;以上面代码为例&＃xff0c;function Person&＃xff08;&＃xff09;{},这个和普通函数有什么区别么&＃xff1f;其实除了命名约定外&＃xff08;建议首字母大写&＃xff09;声明上没有任何区别&＃xff0c;主要是调用方式的不同&＃xff0c;构造函数调用使用new 操作符&＃xff0c;使用new 操作符调用构造函数&＃xff0c;主要经过四个步骤&＃xff1a;
1&＃xff09;、创建一个新的对象&＃xff1b;
2&＃xff09;、把this指向新对象&＃xff1b;
3&＃xff09;、给对象添加属性
4&＃xff09;、返回新对象
对我们上面的代码进行一点简单的修改&＃xff1a;
function Person(){this.name&＃61; "zhangsan";this.age&＃61;10;
};var p&＃61;new Person();
console.log(p.name,p.age) ;//&＃39;zhangsan 10&＃39;
再对比上面使用new操作符调用构造函数的过程&＃xff0c;是不是很容易理解输出的结果。
刚才也说了&＃xff0c;构造函数和普通函数调用完全相同&＃xff0c;那么是不是说可以把构造函数进行普通调用呢&＃xff1f;当然可以&＃xff0c;对我们的例子再次进行修改&＃xff1a;
function Person(){this.name&＃61; "zhangsan";this.age&＃61;10;
};//var p&＃61;Person();
Person();
console.log(window.name,window.age) ;//&＃39;zhangsan 10&＃39;
不使用new操作符调用&＃xff0c;不会经过上述四个步骤的隐式处理&＃xff0c;所以这个时候不会有新对象的创建和this指向的改变&＃xff0c;那么此时的this就指向了全局对象&＃xff0c;在浏览器中即window对象&＃xff0c;所以可以使用window.name来访问&＃xff0c;得到正确的输出。
OOP三大特性&＃xff1a;封装、继承、多态&＃xff1b;这里只讲述在Javascript中如何进行继承&＃xff08;限es5&＃xff09;。
继承只是是代码重用的一种手段&＃xff0c;那么在js中如何实现继承呢&＃xff1f;
基于原型的继承
首先&＃xff0c;函数也是对象&＃xff0c;因为所有函数都是Function对象的实例&＃xff0c;function 函数名&＃xff0c;这种方式定义函数只是一种快捷方式&＃xff0c;理论上和var 函数名&＃61; new Function(p1,body)等价&＃xff0c;从这一点上看函数名其实就是指向函数的指针&＃xff0c;但是两者不同的是&＃xff0c;通过new Function来创建函数&＃xff0c;会被js解释器解释两次&＃xff0c;一次是声明时&＃xff0c;第二次是对body部分的解析。
其次&＃xff0c;任何一个函数创建后&＃xff0c;都有一个原型对象&＃xff0c;如:
声明一个Person函数&＃xff0c;那么我们可以使用Person.prototype来打印一下其原型对象&＃xff0c;可以看到其原型对象是一个Object类型&＃xff0c;里面包括一个属性&＃xff08;不算__proto__,这个术语内部变量&＃xff0c;是实例到原型的指针&＃xff09;constructor&＃xff0c;指向了函数Person&＃xff1b;另外原型对象本身就是另一个对象的实例&＃xff08;这是是Object函数的实例&＃xff0c;&＃61;new Object&＃xff08;&＃xff09;&＃xff09;&＃xff0c;任何一个对象的实例&＃xff0c;都包含一个内部变量__proto__(chrome浏览器)&＃xff08;Object.create(null)创建的对象除外&＃xff09;&＃xff0c;指向创建这个对象实例的类型的原型&＃xff0c;此处__prop__指向的是Object.prototype.而且可以看到Object.prototype上包含的几个方法&＃xff08;toString、valueOf等&＃xff09;。
上面说了任何一个对象的实例&＃xff0c;都包含一个指向其构造函数原型的内部变量&＃xff0c;那么我们创建一个Person 的实例&＃xff1a;
可以看到是同一个&＃xff0c;所以我们可以总结构造函数、实例、和构造函数原型之间的关系如下&＃xff1a;
虽然画的是很难看&＃xff0c;但是我觉得应该也表达出我要表达的意思了啊&＃xff0c;?。
综上&＃xff0c;构造函数的原型是一个对象&＃xff0c;默认情况下&＃xff0c;该对象是Object对象的实例&＃xff1b;由于访问时&＃xff0c;查找规则如下&＃xff1a;先查找当前对象的实例属性&＃xff0c;如果找到则返回&＃xff0c;否则&＃xff0c;查找__proto__指向的原型对象上的同名属性&＃xff0c;找到则返回&＃xff0c;否则继续原型对象的__proto__指向的对象上的同名属性&＃xff0c;一直到Object 实例的__proto__,也就是Object.prototype为止&＃xff0c;上述由__proto__构建的这个链接就叫做原型链。
请看如下代码&＃xff1a;
function Person(){this.name&＃61;"zhangsan"; this.myFriends&＃61;["zhangsan","lisi"]
}Person.prototype.getName&＃61;function(){return this.name;
}function Student(){}Student.prototype&＃61;new Person();var s1&＃61;new Student();
var s2&＃61;new Student();s1.myFriends.push("wangwu");
console.log(s1.myFriends);??
console.log(s2.myFriends);??
上面的代码我基于原型模式实现了一个简单的继承&＃xff0c;那么上面的输出是什么呢&＃xff1f;可以进行测试&＃xff0c;发现输出全部是["zhangsna","lisi","wangwu"];为什么会出现这样的结果&＃xff0c;我们不难分析出&＃xff0c;我们为Student构造函数的原型重新指定了新的对象&＃xff0c;那么此时这个对象&＃xff08;Person实例&＃xff09;就成了Student构造函数的原型对象&＃xff0c;则其实例属性就变成了Student构造函数的原型属性&＃xff0c;所以我们在通过Student实例访问其原型中引用类型属性 的时候会产生共享&＃xff0c;从而出现上述输出。
这种输出结构和我们预期不符&＃xff0c;如何处理这种问题呢&＃xff0c;根据我们的查找规则&＃xff0c;我们如果在本对象上查找到相对应的属性&＃xff0c;不会去查找原型对象&＃xff0c;基于这一点&＃xff0c;我们只要覆盖原型上的对象即可&＃xff0c;而最简单的方式就是借用构造函数&＃xff0c;修改我们的代码如下&＃xff1a;
function Person(){this.name&＃61;"zhangsan"; this.myFriends&＃61;["zhangsan","lisi"]
}Person.prototype.getName&＃61;function(){return this.name;
}function Student(){Person.call(this);//关键调用&＃xff0c;注意这里是普通调用&＃xff0c;非构造函数调用&＃xff0c;本次调用&＃xff0c;通过call改变this指向为Student的实例
}Student.prototype&＃61;new Person();var s1&＃61;new Student();
var s2&＃61;new Student();s1.myFriends.push("wangwu");
console.log(s1.myFriends);
console.log(s2.myFriends);
使用一次普通的方法调用&＃xff0c;传递this&＃xff0c;然后动态的在this上创建name和myFriends属性&＃xff0c;这样实例在输出时就不会查找原型上的属性了&＃xff0c;解决了输出不符合预期的问题。
但是上面的代码仔细分析还有什么问题呢&＃xff1f;
1&＃xff09;、Student.prototype.constructor 指向了Person
2&＃xff09;、调用了两次Person方法&＃xff0c;一次是构造函数调用&＃xff0c;一次是普通调用
3&＃xff09;、借用构造函数方式&＃xff0c;是创建新的实例属性覆盖原型属性&＃xff0c;这样会创建额外的属性。
再次修改我们的代码&＃xff0c;处理上面的问题&＃xff1a;
function inherit(child,parent){function F(){}F.prototype&＃61;parent.prototype;//只要原型上的内容&＃xff0c;而不是实例&＃xff0c;这样就避免了实例上的属性&＃xff0c;只继承原型上的属性&＃xff08;方法&＃xff09;F.prototype.constructor&＃61;child;//这里是强制修改constructor属性&＃xff0c;让它指向子类型child.prototype&＃61;F.prototype;
}
function Person(){this.name&＃61;"zhangsan"; this.myFriends&＃61;["zhangsan","lisi"]
}Person.prototype.getName&＃61;function(){return this.name;
}function Student(){Person.call(this);//关键调用&＃xff0c;注意这里是普通调用&＃xff0c;非构造函数调用&＃xff0c;本次调用&＃xff0c;通过call改变this指向为Student的实例
}//Student.prototype&＃61;new Person();
inherit(Student,Person)var s1&＃61;new Student();
var s2&＃61;new Student();s1.myFriends.push("wangwu");
console.log(s1.myFriends);
console.log(s2.myFriends);
当然上述代码还是有些不完美&＃xff0c;首先Student.prototype.constructor,应该是不可枚举的&＃xff0c;我们这里是却可以。还有很多细节可能考虑不全&＃xff0c;细节方面推荐大家啃一下《Javascript高级程序设计》这本圣经&＃xff0c;本篇就这么多吧。
京公网安备 11010802041100号