理解JS封装

CastlePeaK 发布于2019-08-19 18:04 / 2286人阅读

摘要：把属性和函数封装成一个对象，然后从原型对象生成实例对象原始模式构造函数模式模式原始模式根据上述规格生成实例或者写一个函数直接返回对象的实例该方法的问题是没有建立实例之间的关系构造函数模式配合操作符，将绑定在实例对象上实例的属性将指向构造函数

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

原始模式

构造函数模式

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

云服务器 GPU云服务器 js循环理解 js闭包的理解 js事件监听怎么理解 js封装

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

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

《深入理解ES6》笔记——用模块封装代码（13）

摘要：模块的定义模块是自动运行在严格模式下并且没有办法退出运行的代码。数据模块函数模块类模块模块的导出给数据函数类添加一个，就能导出模块。数据模块函数模块类模块模块的引用在另外的文件中，我们可以引用上面定义的模块。导入指定的模块。模块的定义模块是自动运行在严格模式下并且没有办法退出运行的JavaScript代码。模块可以是函数、数据、类，需要指定导出的模块名，才能被其他模块访问。 //...

Mr_houzi 2019-08-20 18:28 评论0 收藏0
《深入理解ES6》笔记——用模块封装代码（13）

摘要：模块的定义模块是自动运行在严格模式下并且没有办法退出运行的代码。数据模块函数模块类模块模块的导出给数据函数类添加一个，就能导出模块。数据模块函数模块类模块模块的引用在另外的文件中，我们可以引用上面定义的模块。导入指定的模块。模块的定义模块是自动运行在严格模式下并且没有办法退出运行的JavaScript代码。模块可以是函数、数据、类，需要指定导出的模块名，才能被其他模块访问。 //...

tunny 2019-08-29 13:05 评论0 收藏0
深入理解 Javascript 之 JS的封装

摘要：封装常见的封装类中的共有和私有执行结果如下原因是调用的时候，指向的其实是，因此没有输出解决办法更改指向工厂函数也有对于程序员来说这三个关键字应该是很熟悉的哈，但是在中，并没有类似于这样的关键字，但是我们又希望我们定义的属性和方法有一定的访问封装常见的封装 function Person (name,age,sex){ this.name = name; this.a...

张汉庆 2019-08-23 10:55 评论0 收藏0
深入理解ES6之《用模块封装代码》

摘要：导入模块的代码执行后，实例化过的模块被保存在内存中，只要另一个语句引用它就可以重复使用它和的一个重要的限制是它们必须在其它语句和函数之外使用，也就是说不允许出现在语句中，不能有条件导出或以任何方式动态导出。什么是模块模块是自动运行在严格模式下并且没有办法退出运行的Javascript代码在模块的顶部this的值是undefined 其模块不支持html风格的代码注释除非用def...

BigTomato 2019-08-20 18:58 评论0 收藏0