js-工厂模式
2021/7/26 23:05:47
本文主要是介绍js-工厂模式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
简单工厂模式
function createPerson(name) { var o = {} o.name = name o.getName = function() { console.log(this.name) } return o } var person1 = createPerson('zhang san') person1.getName() //zhang san console.log(person1.name) //zhang san
工厂模式:
function Person(name) { this.name = name } Person.prototype.getName = function () { console.log(this.name) } function Car(model) { this.model = model } Car.prototype.getModel = function () { console.log(this.model) } function create(type, param) { // return new this[type](param) if (this instanceof create) { // instanceof 会判断后面的构造函数的原型,是不是存在前面这个对象的原型链里面 return new this[type](param) } else { return new create(type, param) // 该写法主要是为了兼容不写new的情况,如:var car1 = create('car', 'Benz') } } create.prototype = { person: Person, car: Car } var person1 = new create('person','zhang san') /** * // 代码执行流程 * new create('person','zhang san') -> { * __proto__: create.prototype * } * * 此时this instanceof create中this指向上述创建的新对象,其原型和create的原型是同一个,为true,执行return new this[type](param) * person1 = new this[type](param) =》 new Person('zhang san') -> { * __proto__: Person.prototype * name: 'zhang san' * } * */ var car1 = create('car', 'Benz') /** * create('car', 'Benz') * * 此时this instanceof create中的this指向全局对象,和create的原型没啥关系,为false,执行return new create(type, param) * new create(type, param) -> new create('car', 'Benz') -> { * __proto__: create.prototype * } * * 此时又需要执行执行构造函数的代码,在执行到this instanceof create的时候,this被赋值给上面创建的新对象,这个时候this的原型和create的原型又是同一个。 * 所以为true,执行return new this[type](param) * car1 = new this[type](param) =》 new Car('Benz') -> { * __proto__: Car.prototype * model: 'Benz' * } */ person1.getName() //zhang san car1.getModel() //Benz
这篇关于js-工厂模式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程
- 2024-12-20Vuex4课程:新手入门到上手实战全攻略