神刀安全网

理解JS封装

把属性和函数封装成一个对象,然后从原型对象生成实例对象

  • 原始模式

  • 构造函数模式

  • prototype模式

原始模式

var Person = {     name: "",     age: "" }; 

根据上述规格生成实例:

var p1 = {     name: "Oliver",     age: 18 }; var p2 = {     name: "Troy",     age: 24 }; 

或者写一个函数直接返回对象的实例:

function Person(name, age) {     return {         name: name,         age: age     }; } var p1 = Person("Oliver", 18); var p2 = Person("Troy", 24); 

该方法的问题是没有建立实例之间的关系

构造函数模式

this配合new操作符,将this绑定在实例对象上:

function Person(name, age) {     this.name = name;     this.age = age; } var p1 = new Person("Oli", 18); var p2 = new Person("Tro", 24); 

实例的constructor属性将指向构造函数:

console.log(p1.constructor); //Person(){} 

instanceof运算符检验是否为该原型对象的实例:

console.log(p1 instanceof Person); //True 

该方法会重复占用内存

prototype模式

可以把重复的,不变的属性和方法(就是共有的,不是私有的)放在原型的prototype对象上:

function Person(name, age) {     this.name = name;     this.age = age; } Person.prototype.sayName = function() {     console.log(this.name); }; Person.prototype.nationality = "Chinese"; var p1 = new Person("Oli", 18); var p2 = new Person("Tro", 24); p2.sayName(); //Tro console.log(p1.nationality); //Chinese 

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 理解JS封装

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮