人才微网站开发,国家建设部建筑业网站,创建站点是什么意思,彩票网站wordpress模板工厂模式
工厂模式 是用来创建对象的一种最常用的设计模式。工厂模式不暴露创建对象的具体逻辑#xff0c;而是将逻辑封装在一个函数中#xff0c;那么这个函数就可以被视为一个工厂。工厂模式常见于大型项目#xff0c;例如 jQuery 的 $ 对象#xff0c;我们创建选择器对…工厂模式
工厂模式 是用来创建对象的一种最常用的设计模式。工厂模式不暴露创建对象的具体逻辑而是将逻辑封装在一个函数中那么这个函数就可以被视为一个工厂。工厂模式常见于大型项目例如 jQuery 的 $ 对象我们创建选择器对象之所以没有 new selector 就是因为 $() 已经是一个工厂方法其他例子例如 React.createElement()、Vue.component() 都是工厂模式的实现。
工厂模式根据抽象程度的不同可以分为三种
简单工厂通过第三方的类完成松耦合的任务复杂工厂通过把实例化的任务交给子类来完成的用以到达松耦合的目的超级工厂通过 eval() 来完成智能工厂
工厂的目的在于判断接口最终用哪个类实例化故与接口密不可分。
使用工厂最终达到的效果是多态和类与类之间的松耦合。
应用场景
ES5 实现工厂模式
function createPerson(name, age, job) {let person new Object();person.name name;person.age age;person.job job;person.sayNam function () {console.log(Im ${name});};return person;
}const person1 createPerson(Ben, 21, student);
const person2 createPerson(Gray, 25, Doctor);函数 createPerson() 能够根据接受的参数来构建一个包含所有必要信息的 Person 对象。可以无数次调用这个函数而每次它都会返回一个包含三个属性一个方法的对象。工厂模式虽然解决了创建多个相似对象的问题但却没有解决对象识别的问题即怎样知道一个对象的类型。
ES6 实现工厂模式
class User {constructor(name, auth) {this.name name;this.auth auth;}
}
class UserFactory {static createUser(name, auth) {//工厂内部封装了创建对象的逻辑://权限为 admin 时auth1权限为 user 时auth 为 2//使用者在外部创建对象时,不需要知道各个权限对应哪个字段, 不需要知道赋权的逻辑只需要知道创建了一个管理员和用户if (auth admin) return new User(name, 1);if (auth user) return new User(name, 2);}
}
const admin UserFactory.createUser(cxk, admin);
const user UserFactory.createUser(xz, user);原型模式
我们创建的每个函数都有一个 prototype原型属性这个属性是一个指针指向一个对象而这个对象的用途是包含可以由 特定类型的所有实例共享的属性和方法。如果按照字面意思来理解那么 prototype 就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说不必在构造函数中定义对象实例的信息而是可以将这些信息直接添加到原型对象中。
function Person(){}Person.prototype.name Uzi;
Person.prototype.age 22;
Person.prototype.job E-Sports Player;
Person.prototype.sayName function(){console.log(this.name);
}const uzi1 new Person();
uzi1.sayName();
// Uziconst uzi2 new Person();
uzi2.sayName();
// Uzi// 共用公用方法
console.log(person1.sayName person2.sayName);
// true与构造函数不同新对象的这些属性和方法是由所有实例共享的。
理解原型对象
无论什么时候只要创建一个新函数就会根据一组特定的规则为该函数创建一个 prototype 属性这个属性指向函数的原型对象。在默认情况下所有原型对象都会自动获得一个 constructor构造函数属性这个属性是一个指向 prototype 属性所在函数的指针。
创建了自定义的构造函数之后其原型对象默认只会取得 constructor 属性至于其他方法则都是从 Object 继承而来的。当调用构造函数创建一个新的实例后该实例的内部将包含一个指针内部属性指向构造函数的原型对象。ECMAScript 5 中管这个指针叫做 [[Prototype]]。虽然在脚本中没有标准的方式访问 [[Prototype]]但 Firefox、Safari 和 Chrome 在每个对象上都支持一个属性 __proto__而在其他实现中这个属性对脚本则是完全不可见的。不过要明确的真正重要的一点就是这个连接存在于实例与构造函数的原型之间而不是存在于实例与构造函数之间。
原型最初只包含 constructor 属性而该属性也是共享的因此可以通过对象实例访问。
虽然可以通过对象实例访问保存在原型中的值但却不能通过对象实例重写原型中的值。如果我们在实例中添加了一个属性而该属性与实例原型中的一个属性同名那我们就在实例中创建该属性该属性将会屏蔽原型中的属性。
function Person(){}Person.prototype.name Nicholas;
Person.prototype.age 29;
Person.prototype.job Software Engineer;
Person.prototype.sayName function(){
console.log(this.name);
};const person1 new Person();
const person2 new Person();person1.name Greg;
console.log(person1.name);
// Greg // from instance
console.log(person2.name);
// Nicholas // from prototype两个实例访问 name 属性的过程
person1 实例中读取 name 属性 在实例中读取 name 属性成功person2 实例中读取 name 属性 实例中无 name 属性 从原型链中读取 name 属性 读取成功
当为对象实例添加一个属性时这个属性就会 屏蔽 原型对象中保存的同名属性。换句话说添加这个属性只会阻止我们访问原型中的那个属性值但不会修改那个属性。即使这个属性设置为 null也只会在实例中设置这个属性而不会恢复其指向原型的连接。不过使用 delete 操作符则可以完全删除实例属性从而让我们能够重新访问原型中的属性。 ECMAScript5 的 Object.getOwnPropertyDescriptor() 方法只能用于实例属性要取得原型属性的描述符必须直接在原型对象上调用 Object.getOwnPropertyDescriptor() 方法。 原型与实例属性检测
有两种方式使用 in 操作符单独使用和在 for-in 循环中使用。在单独使用时in 操作符会在通过对象能够访问给定属性时返回 true无论该属性存在于实例中还是原型中。
同时使用 hasOwnProperty() 方法和 in 操作符就可以确定该属性到底是存在于对象中还是存在于原型中。
由于 in 操作符只要通过对象能够访问到属性就返回 truehasOwnProperty() 只在属性存在于实例中时才返回 true因此只要 in 操作符返回 true 而 hasOwnProperty() 返回 false就可以确定属性是原型中的属性。
更简单的原型语法
前面的例子中每添加一个属性和方法就要输入一遍 Person.prototype为减少不必要的输入也为了从视觉上更好地封装原型的功能更常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象。
function Person(){}Person.prototype {name: Nicholas,age: 29,job: Software Engineer,sayName: function (){console.log(this.name);}
}前面介绍过没创建一个函数就会同时创建它的原型对象这个对象自动获得构造函数。而这里的语法这里相当于重写了实例的原型对象相应地原型对象中的构造函数 constructor 亦被覆盖不再指向 Person 函数。此时尽管 instanceof 操作符还能返回正确的结果但通过 constructor 已经无法确定对象的类型了。
当然我们可以手动为它设置回适当的值。但是以这种方式重设 constructor 属性回导致它的 [[Enumerable]] 特性被设置为 true。默认情况下原生的 constructor 属性是不可枚举的。
function Person(){}Person.prototype {constructor: Person,name: Nicholas,age: 29,job: Software Engineer,sayName: function (){console.log(this.name);}
}重设构造函数只适用于 ECMAScript5 兼容的浏览器。
Object.defineProperty(Person, constructor, {enumerable: false,value: Person
})原型的动态性
由于在原型中查找值的过程是一次搜索因此我们对原型对象所做的任何修改都能够立即从实例上反映出来即使是先创建了实例后修改原型也照样如此。
实例与原型之间的关系是松散的
function Person(){}const friend new Person();Person.prototype {constructor: Person,name: Nicholas,age: 29,job: Software Engineer,sayName: function (){console.log(this.name);}
};friend.sayName();
// error重写原型对象切断了现有原型与任何之前已经存在的对象实例之间的联系它们引用的仍然是最初的原型。
原型对象的原型
原型模式的重要性不仅体现在创建自定义类型方面就连所有原生的引用类型都是采用这种模式创建的。所有原生引用类型Object、Array、String 等等都在其构造函数的原型上定义了方法。
通过原生对象的原型不仅可以取得所有默认方法的引用而且也可以定义新方法。可以像修改自定义对象的原型一样修改原生对象的原型因此可以随时添加方法。
尽管可以这样做但我们不推荐在产品化的程序中修改原生对象的原型。如果因某个实现中缺少某个方法就在原生对象的原型中添加这个方法那么当在另一个支持该方法的实现中运行代码时就可能会导致命名冲突。而且这样做也可能会意外地重写原生方法。
原型对象的问题
原型模式省略了为构造函数传递初始参数的环节结果所有实例在默认情况下都将取得相同的属性值。
原型中的所有属性是被很多实例共享的这种共享对于函数非常合适。对于那些包含基本值的属性倒也说得过去毕竟通过在实例上添加一个同名属性可以隐藏原型中的对应属性。然而对于包含引用类型值的属性来说问题就比较突出了。
function Person(){}Person.prototype {name: Nicholas,age: 29,job: Software Engineer,friends: [Shelby, Court],sayName: function (){console.log(this.name);}
}const person1 new Person();
const person2 new Person();person1.friends.push(Van);console.log(person1.friends);
// Shelby,Court,Van
console.log(person2.friends);
// Shelby,COurt,Van
console.log(person1.friends person2.friends);
// true
