资讯专栏INFORMATION COLUMN

JS创建对象模式及其对象原型链探究(四):原型模式

ruicbAndroid / 3340人阅读

摘要:原型模式定义构造函数,在构造函数的原型对象中定义对象的属性和方法,并通过构造函数创建对象。,属性存在于实例对象中,属性不存在于实例对象中分割线操作符会在通过对象能够访问给定属性时返回,无论该属性是存在于实例中还是原型中。

原型模式

定义构造函数,在构造函数的原型对象中定义对象的属性和方法,并通过构造函数创建对象。

1.创建对象
function Person(){};

Person.prototype.name = "Mike";
Person.prototype.age = 20;
Person.prototype.job = "student";

Person.prototype.showName = function(){
    console.log("name = " + this.name);
};

var p1 = new Person();
var p2 = new Person();

console.log(p1);
console.log(p2);

2.探究原型对象

使用原型对象的好处是可以让所有对象实例共享它包含的属性和方法,即p1和p2访问的都是同一组属性和同一个showName()函数。

但改变原型对象上的属性时,所有实例对象上对应的属性也同时改变。

Person.prototype.job = "teacher";
Person.prototype.showJob = function(){
    console.log("job = " + this.job);
};

p1.showJob();
p2.showJob();

console.log("p1.showJob === p2.showJob:");
console.log(p1.showJob === p2.showJob);
console.log("-----分割线-----");

当代码读取对象的某个属性时,都会执行至少一次搜索。搜索首先从实例对象开始,若在实例对象中搜索到了匹配的属性,则返回该属性的值;若无,在搜索该实例对象的__proto__指针指向的原型对象,若在原型对象中搜索到了匹配的属性,则返回该属性的值;若无,则输出undefined

p1.country = "China";
console.log("p1.country=");    
console.log(p1.country);    //China
console.log("p2.country=");    
console.log(p2.country);    //Undefined
console.log("-----分割线-----");

Person.prototype.country = "USA";
console.log("p1.country=");    
console.log(p1.country);    //搜索先匹配到了实例对象p1上的country属性,返回值为"China"
console.log("p2.country=");    
console.log(p2.country);    //第一次搜索匹配不到实例对象p2上的country属性,执行第二次搜索,匹配到原型对象上的country属性,返回值为"USA"
console.log("-----分割线-----");

所以,我们无法通过修改实例对象来重写原型中的属性。

当为实例对象添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性,即便我们将其设置为null,也只会在实例中设置这个属性,而不会恢复其指向原型的连接。不过,使用delete操作符可以完全删除实例对象的属性。

p1.country = null;
console.log("p1.country=");    
console.log(p1.country);    //null
console.log("p2.country=");    
console.log(p2.country);    //USA
console.log("-----分割线-----");

// delete操作符可以完全删除实例属性,从而让我们能够重新访问原型中的属性
delete p1.country;
console.log("p1.country=");
console.log(p1.country);
console.log("p2.country=");
console.log(p2.country);
console.log("-----分割线-----");

我们可以通过hasOwnProperty()方法检测一个属性是存在于实例中,还是原型中。这个方法只在给定属性存在于实例对象中,才会返回true。

另外,in操作符会在通过对象能够访问给定属性时返回true,无论这个属性是存在于实例中还是原型中。

// 先给p1实例对象定义country属性
p1.country = "China";

// hasOwnProperty()方法可以检测一个属性是存在于实例中,还是存在于原型中。
// 只在给定属性存在于对象实例中时,才会返回true。
// 此方法继承自Object。
console.log("p1.hasOwnProperty(country):");    
console.log(p1.hasOwnProperty("country"));    //true,country属性存在于实例对象p1中
console.log("p2.hasOwnProperty(country):");    
console.log(p2.hasOwnProperty("country"));    //false,country属性不存在于实例对象p2中
console.log("-----分割线-----");

// in操作符会在通过对象能够访问给定属性时返回true,无论该属性是存在于实例中还是原型中。
console.log("country in p1:");
console.log("country" in p1);    //true
console.log("country in p2:");
console.log("country" in p2);    //true
console.log("-----分割线-----");

3.观察Person构造函数涉及到的原型链**
console.log("Person.prototype=");
console.log(Person.prototype);
console.log("Person.prototype === Function.prototype;");    
console.log(Person.prototype === Function.prototype);    //false
console.log("-----分割线-----");

console.log("Person.prototype.constructor === Person:");    //true
console.log(Person.prototype.constructor === Person);    //true
console.log("-----分割线-----");

console.log("Person.prototype.__proto__ === Object.prototype:");    //true
console.log(Person.prototype.__proto__ === Object.prototype);    //true
console.log("-----分割线-----");

console.log("Person.__proto__=");
console.log(Person.__proto__);
console.log("Person.__proto__ === Function.prototype:");
console.log(Person.__proto__ === Function.prototype);    //true
console.log("-----分割线-----");

4.观察p1实例对象涉及到的原型链
console.log("p1.prototype=");
console.log(p1.prototype);
console.log("-----分割线-----");

console.log("p1.__proto__=");
console.log(p1.__proto__);
console.log("p1.__proto__ === Person:");
console.log(p1.__proto__ === Person);        //false
console.log("p1.__proto__ === Person.prototype:");
console.log(p1.__proto__ === Person.prototype);        //true
console.log("-----分割线-----");

console.log("p1.__proto__.constructor === Person:");
console.log(p1.__proto__.constructor === Person);
console.log("-----分割线-----");

console.log("p1.__proto__.__proto__=");
console.log(p1.__proto__.__proto__);
console.log("p1.__proto__.__proto__ === Object.prototype:");
console.log(p1.__proto__.__proto__ === Object.prototype);    //true
console.log("-----分割线-----");

5.观察下p1.showName属性引用的函数
console.log("p1.showName.prototype=");
console.log(p1.showName.prototype);

console.log("p1.showName.prototype  === Function.prototype:");    
console.log(p1.showName.prototype  === Function.prototype);    //false
console.log("-----分割线-----");

console.log("p1.showName.prototype.constructor=");
console.log(p1.showName.prototype.constructor);
console.log("-----分割线-----");

console.log("p1.showName.prototype.__proto__=");
console.log(p1.showName.prototype.__proto__);

console.log("p1.showName.prototype.__proto__ === Object.prototype:");    
console.log(p1.showName.prototype.__proto__ === Object.prototype);    //true
console.log("-----分割线-----");

console.log("p1.showName.__proto__=");
console.log(p1.showName.__proto__);
console.log("p1.showName.__proto__ === Function.prototype:");    
console.log(p1.showName.__proto__ === Function.prototype);    //true
console.log("-----分割线-----");

原型链图

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79012.html

相关文章

  • JS创建对象模式及其对象原型探究(一):Object模式

    摘要:对象是由构造函数创建而成的,所以它的指向原型链图对象的原型链图对象属性引用的匿名函数的原型链图 Object模式 创建一个Object实例,再为其添加属性和方法。 这是创建自定义对象最简单的方式。 1.创建对象 // 创建person对象 var person = new Object(); person.name = Mike; person.age = 20; person.jo...

    李义 评论0 收藏0
  • JS创建对象模式及其对象原型探究(五):组合使用构造函数模式原型模式

    摘要:组合使用构造函数模式和原型模式构造函数模式用于定义实例属性,原型模式用于定义方法和共享的属性。创建对象组合使用构造函数模式和原型模式指向构造函数,这里要将其恢复为指向构造函数。另外,这种混合模式,还支持向构造函数传递参数。 组合使用构造函数模式和原型模式 构造函数模式用于定义实例属性,原型模式用于定义方法和共享的属性。 创建自定义类型的最常见方式,就是组合使用构造函数模式和原型模式。 ...

    Shimmer 评论0 收藏0
  • JS创建对象模式及其对象原型探究(二):工厂模式

    摘要:工厂模式用函数来封装,以特定接口创建对象的细节。缺点不能知道对象识别的问题对象的类型不知道。复杂的工厂模式定义是将其成员对象的实列化推迟到子类中,子类可以重写父类接口方法以便创建的时候指定自己的对象类型。 工厂模式 用函数来封装,以特定接口创建对象的细节。 1.创建对象 function createPerson(name, age, job){ var o = new Obj...

    smartlion 评论0 收藏0
  • JS创建对象模式及其对象原型探究(三):构造函数模式

    摘要:创建对象与工厂模式的区别没有显示地创建对象直接将方法和属性付给了对象没有语句构造函数应该始终以一个大写字母开头。创建构造函数的实例,必须使用操作符。 构造函数模式 ECMAScript中的构造函数可用来创建特定类型的对象,像Object和Array这样的原生构造函数。也可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法。 1.创建对象 function Person(name...

    Martin91 评论0 收藏0
  • js知识梳理4.继承的模式探究

    摘要:而且在超类型的原型中定义的方法,对子类型而言也是不可见的,结果所有类型都只能使用构造函数模式。在主要考虑对象而不是自定义类型和构造函数的情况下,这个模式也不错。 写在前面 注:这个系列是本人对js知识的一些梳理,其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版,感谢它们的作者和译者。有发现什么问题的,欢迎留言指出。 1.原型链 将原型链作...

    wenshi11019 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<