码迷,mamicode.com
首页 > Web开发 > 详细

JS创建对象的几种方式

时间:2017-11-18 01:15:06      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:一起   ons   tor   func   无法   on()   封装   this   obj   

第一:工厂模式:代码如下

缺点:对象无法识别,因为原型都指向(Object)

 function Person(name) {
    var obj = new Object();
    obj.name = name;
    obj.say = function () {
        return "我是" + this.name;
    }
    return obj
}
var person = Person("Ayden") console.log(person.name)//Ayden console.log(person.say())//我是Ayden

第二:构造函数模式:代码如下

优点:实例可以识别为一个特定的类型,即可以分 ‘类’ 

缺点:每次创建实例时每个方法都要被创建一次

function Person(name) {
   this.name = name ;
   this.say = function () {
       return "我是" + this.name ;
   }
}
var person = new Person("Ayden")
console.log(person)

构造模式优化:代码如下

优点:解决了 “每次创建实例时每个方法都要被创建一次“” 的问题

缺点:面向对象三大特性之一——封装。这叫啥封装?

function Person(name) {
    this.name = name ;
    this.say = say
}
function say() {
    return "我是" + this.name;
}
var person = new Person("Ayden")
console.log(person)

第三:原型模式:代码如下

优点:实例的方法不会重新创建

缺点:1. 所有的属性和方法都共享 2. 不能初始化参数 3.总想把代码写到一起,即封装

function Person() {
        
}
Person.prototype.name = "Ayden";
Person.prototype.say = function () {
    return "我是" + this.name
}
var person = new Person();
console.log(person)

原型模式优化:代码如下

优点:封装性好些

缺点:丢失了constructor属性

function Person() {

}
Person.prototype = {
    name :"Ayden",
    say :function () {
         return "我是" + this.name
    }
}
var person = new Person()

原型模式再优化:

优点:实例可以通过constructor属性找到所属构造函数

缺点:1. 所有的属性和方法都共享 2. 不能初始化参数 

function Person() {

}
Person.prototype = {
   constructor: Person, 
   name: "Ayden",
   say: function () {
        return "我是" + this.name
    }
}
var person = new Person()

第四:混合模式:代码如下:

优点:该私有的私有,该共享的共享(使用最广泛的方式)

缺点:希望全部写在一起,即更好的封装性

 function Person(name) {
        this.name = name ;
    }
    Person.prototype = {
        say:function () {
            return "我是" + this.name
        }
    }
    var person1 = new Person("Ayden");
    var person2 = new Person("Tom")

 

JS创建对象的几种方式

标签:一起   ons   tor   func   无法   on()   封装   this   obj   

原文地址:http://www.cnblogs.com/kaw19950302/p/7854205.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!