js面向对象-原型模式

warmcheng 发布于2019-08-23 11:25 / 3357人阅读

摘要：理解原型对象实例指针构造函数属性属性原型对象，在所有支持的实现中，这个方法返回的值。但是重写整个原型是不行的，因为切断了构造函数与最初原型的联系没有问题原型对象的问题构造函数指向需要手工写入对于引用类型来说有共享问题的错误

什么是原型模式

使用构造函数的 prototype 属性来指定那些应该共享的属性和方法。组合使用构造
函数模式和原型模式时，使用构造函数定义实例属性，而使用原型定义共享的属性和方法。

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true

理解原型对象

实例(指针)->构造函数constructor属性->prototype属性->原型对象

Object.getPrototypeOf() ，在所有支持的实现中，这个

方法返回 [[Prototype]] 的值。

alert(Object.getPrototypeOf(person1) == Person.prototype); //true
alert(Object.getPrototypeOf(person1).name); //"Nicholas"

当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name = "Greg";
alert(person1.name); //"Greg"——来自实例
alert(person2.name); //"Nicholas"——来自原型
delete person1.name;
alert(person1.name); //"Nicholas" ——

使用 hasOwnProperty()方法可以检测一个属性是存在于实例中，还是存在于原型中。属性存在于对象实例中时，才会返回 true 。

function Person() {
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function () {
    alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); //false
person1.name = "Greg";
alert(person1.name); //"Greg"——来自实例
alert(person1.hasOwnProperty("name")); //true
alert(person2.name); //"Nicholas"——来自原型
alert(person2.hasOwnProperty("name")); //false
delete person1.name;
alert(person1.name); //"Nicholas"——来自原型
alert(person1.hasOwnProperty("name")); //false

原型与in操作符

使用 in 操作符， in 操作符会在通过对象能够访问给定属性时返回 true ，无论该属性存在于实例中还是原型中。

结合使用in和hasPrototypeProperty()可以确定属性到底是存在对象中还是原型中

function hasPrototypeProperty(object, name){
    return !object.hasOwnProperty(name) && (name in object);
}

更简单的原型语法

为减少不必要的输入，也为了从视觉上更好地封装原型的功能，更常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象.

function Person() {
}
Person.prototype = {
    name: "Nicholas",
    age: 29,
    job: "Software Engineer",
    sayName: function () {
        alert(this.name);
    }
};
// 重设构造函数，只适用于 ECMAScript 5  兼容的浏览器
Object.defineProperty(Person.prototype, "constructor", {
    enumerable: false,
    value: Person
});

原型的动态性

由于在原型中查找值的过程是一次搜索，因此我们对原型对象所做的任何修改都能够立即从实例上反映出来——即使是先创建了实例后修改原型也照样如此。（但是重写整个原型是不行的，因为切断了构造函数与最初原型的联系）

var friend = new Person();
Person.prototype.sayHi = function(){
alert("hi");
};
friend.sayHi(); //"hi"（没有问题！）

原型对象的问题

构造函数指向需要手工写入

对于引用类型来说有共享问题的错误

GPU云服务器云服务器面向对象设计模式 js 面向对象视频 oop面向对象 js js面向对象开发表格

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

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

JS面向对象编程之封装

摘要：在基于原型的面向对象方式中，对象则是依靠构造函数和原型构造出来的。来看下面的例子优点与单纯使用构造函数不一样，原型对象中的方法不会在实例中重新创建一次，节约内存。我们所熟知的面向对象语言如 C++、Java 都有类的的概念，类是实例的类型模板，比如Student表示学生这种类型，而不表示任何具体的某个学生，而实例就是根据这个类型创建的一个具体的对象，比如zhangsan、lisi，由...

YFan 2019-08-23 10:35 评论0 收藏0
面向对象的JavaScript（如何一步步成为js高手）

摘要：虽然，也是面向疾苦的语言，但是，它和静态类型语言的面向接口编程不一而足。对象对他自己的行为负责，其他对象不关心它的内部实现。 ‘工欲善其事，必先利其器’，在深入学习JavaScript之前，我认为我们很有必要了解以下，JavaScript这门面向对象的动态语言到底是一门什么样的语言。 JavaScript vs 其他面向对象语言它没有使用像Java等传统的面向对象语言的类式继承，而...

peixn 2019-08-21 18:35 评论0 收藏0
浅谈JavaScript面向对象

摘要：不必在构造函数中定义对象实例的信息。其次，按照一切事物皆对象的这饿极本的面向对象的法则来说，类本身并不是一个对象，然而原型方式的构造函数和原型本身也是个对象。第二个问题就是在创建子类型的实例时，不能向超类型的构造函数中传递参数。前言对象(Object)应该算是js中最为重要的部分，也是js中非常难懂晦涩的一部分。更是面试以及框架设计中各出没。写这篇文章，主要参考与JavaScrip...

cyixlq 2019-08-21 17:15 评论0 收藏0
JavaScript面向对象核心知识归纳

摘要：一面向对象概念面向对象就是使用对象。因此在构造函数中表示刚刚创建出来的对象。在构造函数中利用对象的动态特性为其对象添加成员。一、面向对象 1.1 概念面向对象就是使用对象。面向对象开发就是使用对象开发。面向过程就是用过程的方式进行开发。面向对象是对面向过程的封装。 1.2 三大特性抽象性所谓的抽象性就是：如果需要一个对象描述数据，需要抽取这个对象的核心数据提出需要的核心...

TalkingData 2019-08-22 10:41 评论0 收藏0
js面向对象编程

摘要：构造函数模式通过构造函数创建的对象可以通过标识对象类型，通过检测对象类型。实际上，应该说是没有办法在不影响所有对象实例的情况下，给超类型的构造函数传递参数。 ==什么是对象？==就是无序属性的集合，通过属性或者方法名与值的一一映射。==对象的属性类型==对象中还定义了一些js中不能直接访问的属性，是为了实现js引擎用的。有数据属性和访问器属性两种。1.数据属性数据属性包含一个数据值的位...

zeyu 2019-08-23 18:29 评论0 收藏0