javascript 中的原型与对象 (一)，12 个 View 绘制流程高频面试题
//使用 instanceof 操作符可以判断一个对象的类型。
//typeof 一般用来获取简单类型和函数。而引用类型一般使用 instanceof，因为引用类型用 typeof 总是返回 object。
alert(p1 instanceof Person); // true
</script>
我们根据需要，可以 Person.prototype 属性指定新的对象，来作为 Person 的原型对象。
但是这个时候有个问题，新的对象的 constructor 属性则不再指向 Person 构造函数了。
看下面的代码：
<script type="text/javascript">
function Person () {
}
//直接给 Person 的原型指定对象字面量。则这个对象的 constructor 属性不再指向 Person 函数
Person.prototype = {
name:"志玲",
age:20
};
var p1 = new Person();
alert(p1.name); // 志玲
alert(p1 instanceof Person); // true
alert(Person.prototype.constructor === Person); //false
//如果 constructor 对你很重要，你应该在 Person.prototype 中添加一行这样的代码：
/*
Person.prototype = {
constructor : Person //让 constructor 重新指向 Person 函数
}
*/
</script>
2.3 __proto__ 属性(注意：左右各是 2 个下划线)
? 用构造方法创建一个新的对象之后，这个对象中默认会有一个不可访问的属性 [[prototype]] , 这个属性就指向了构造方法的原型对象。
? 但是在个别浏览器中，也提供了对这个属性[[prototype]]的访问(chrome 浏览器和火狐浏览器。ie 浏览器不支持)。访问方式：p1.__proto__
?
但是开发者尽量不要用这种方式去访问，因为操作不慎会改变这个对象的继承原型链。
<script type="text/javascript">
function Person () {
}
//直接给 Person 的原型指定对象字面量。则这个对象的 constructor 属性不再指向 Person 函数
Person.prototype = {
constructor : Person,
name:"志玲",
age:20
};
var p1 = new Person();
alert(p1.proto === Person.prototype); //true
</script>
2.4 hasOwnProperty() 方法
? 大家知道，我们用去访问一个对象的属性的时候，这个属性既有可能来自对象本身，也有可能来自这个对象的[[prototype]]属性指向的原型。
? 那么如何判断这个对象的来源呢？
? hasOwnProperty 方法，可以判断一个属性是否来自对象本身。
<script type="text/javascript">
function Person () {
}
Person.prototype.name = "志玲";
var p1 = new Person();
p1.sex = "女";
//sex 属性是直接在 p1 属性中添加，所以是 true
alert("sex 属性是对象本身的：" + p1.hasOwnProperty("sex"));
// name 属性是在原型中添加的，所以是 false
alert("name 属性是对象本身的：" + p1.hasOwnProperty("name"));
// age 属性不存在，所以也是 false
alert("age 属性是存在于对象本身：" + p1.hasOwnProperty("age"));
</script>
所以，通过 hasOwnProperty 这个方法可以判断一个对象是否在对象本身添加的，但是不能判断是否存在于原型中，因为有可能这个属性不存在。
也即是说，在原型中的属性和不存在的属性都会返回 fasle。
如何判断一个属性是否存在于原型中呢？
2.5 in 操作符
? in 操作符用来判断一个属性是否存在于这个对象中。但是在查找这个属性时候，现在对象本身中找，如果对象找不到再去原型中找。换句话说，只要对象和原型中有一个地方存在这个属性，就返回 true
<script type="text/javascript">
function Person () {
}
Person.prototype.name = "志玲";
var p1 = new Person();
p1.sex = "女";
alert("sex" in p1); // 对象本身添加的，所以 true
alert("name" in p1); //原型中存在，所以 true
alert("age" in p1); //对象和原型中都不存在，所以 false
</script>
回到前面的问题，如果判断一个属性是否存在于原型中：
如果一个属性存在，但是没有在对象本身中，则一定存在于原型中。
<script type="text/javascript">
function Person () {
}
Person.prototype.name = "志玲";
var p1 = new Person();
p1.sex = "女";
//定义一个函数去判断原型所在的位置
function propertyLocation(obj, prop){
if(!(prop in obj)){
alert(prop + "属性不存在");
}else if(obj.hasOwnProperty(prop)){
alert(prop + "属性存在于对象中");
}else {
alert(prop + "对象存在于原型中");
}
}
propertyLocation(p1, "age");
propertyLocation(p1, "name");
propertyLocation(p1, "sex");
</script
三、组合原型模型和构造函数模型创建对象
===================
3.1 原型模型创建对象的缺陷
? 原型中的所有的属性都是共享的。也就是说，用同一个构造函数创建的对象去访问原型中的属性的时候，大家都是访问的同一个对象，如果一个对象对原型的属性进行了修改，则会反映到所有的对象上面。
? 但是在实际使用中，每个对象的属性一般是不同的。张三的姓名是张三，李四的姓名是李四。
? **==但是，这个共享特性对 方法(属性值是函数的属性)又是非常合适的。==**所有的对象共享方法是最佳状态。这种特性在 c#和 Java 中是天生存在的。
3.2 构造函数模型创建对象的缺陷
? 在构造函数中添加的属性和方法，每个对象都有自己独有的一份，大家不会共享。这个特性对属性比较合适，但是对方法又不太合适。因为对所有对象来说，他们的方法应该是一份就够了，没有必要每人一份，造成内存的浪费和性能的低下。
<script type="text/javascript">
function Person() {
this.name = "李四";
this.age = 20;
this.eat = function() {
alert("吃完东西");
}
}
var p1 = new Person();
var p2 = new Person();
//每个对象都会有不同的方法
alert(p1.eat === p2.eat); //fasle
</script>
可以使用下面的方法解决：
<script type="text/javascript">
function Person() {
this.name = "李四";
this.age = 20;
this.eat = eat;
}
function eat() {
alert("吃完东西");
}
var p1 = new Person();
var p2 = new Person();
//因为 eat 属性都是赋值的同一个函数，所以是 true
alert(p1.eat === p2.eat); //true
</script>
但是上面的这种解决方法具有致命的缺陷：封装性太差。使用面向对象，目的之一就是封装代码，这个时候为了性能又要把代码抽出对象之外，这是反人类的设计。
3.3 使用组合模式解决上述两种缺陷
? 原型模式适合封装方法，构造函数模式适合封装属性，综合两种模式的优点就有了组合模式。
<script type="text/javascript">
//在构造方法内部封装属性
function Person(name, age) {
this.name = name;
this.age = age;
}
//在原型对象内封装方法
Person.prototype.eat = function (food) {
alert(this.name + "爱吃" + food);
}
Person.prototype.play = function (playName) {
alert(this.name + "爱玩" + playName);
}
var p1 = new Person("李四", 20);
var p2 = new Person("张三", 30);
p1.eat("苹果");
p2.eat("香蕉");
p1.play("志玲");
p2.play("凤姐");
</script>
四、动态原型模式创建对象
============
? 前面讲到的组合模式，也并非完美无缺，有一点也是感觉不是很完美。把构造方法和原型分开写，总让人感觉不舒服，应该想办法把构造方法和原型封装在一起，所以就有了动态原型模式。
? 动态原型模式把所有的属性和方法都封装在构造方法中，而仅仅在需要的时候才去在构造方法中初始化原型，又保持了同时使用构造函数和原型的优点。
看下面的代码：
还未添加个人签名 2021.10.31 加入
还未添加个人简介
评论