当前位置: 首页 > 图灵资讯 > 技术篇> javascript encapsulation 封装

javascript encapsulation 封装

来源:图灵教育
时间:2023-05-29 13:54:17

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>encapsulation.html</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta name="keywords" content=“keyword1,keyword2,keyword3”>    <meta name="description" content="this is my page">    <meta name="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript" src="../js/jquery-1.11.3.js"></script>  </head>    <body><p id="p"></p><script type="text/javascript">// <![CDATA[//如果您需要访问没有硬编码的window标识符的全球对象,您可以在任何级别的函数作用域进行以下操作:var global = (function () {return this;})();function show(str) {$("#p").append($("<p></p>").text("" + str));}///对象定义:ECMA-262将对象定义为:“无序属性的集合,属性可以包括基本值、对象或函数。//创建对象:每个对象都是基于一种引用类型创建的。//创建对象:每个对象都是基于一种引用类型创建的。//这种引用类型可以是原始类型(Object, Array, Date, RegExp, Function, Boolean, Number, String),也可以是自定义类型。//1、function构造函数模式 Person(name, age) {    this.name = name;    this.age = age;    this.sayName = function() {        show(this.name);    };}使用new操作符可以通过上述构造函数创建对象实例。var zhangsan = new Person('zhangsan', 20);var lisi = new Person('lisi', 20);zhangsan.sayName();//zhangsanlisi.sayName();//lisi////通过new创建对象需要4个步骤///a、创造新对象;[var o = new Object();]//b、将构造函数的作用域赋予新对象(因此this指向新对象);[Person.apply(o)]  [Person原this指向global]//c、执行构造函数中的代码(为此新对象添加属性)//d、返回新对象。///通过代码还原new的步骤:function createObject(P) {    var o = new Object();    var args = Array.prototype.slice.call(arguments, 1);    o.__proto__ = P.prototype;    P.prototype.constructor = P;    P.apply(o, args);    return o;}varr//测试新的创建实例方法 wangwu = createObject(Person, 'wangwu', 20);wangwu.sayName();//wangwu//2、原型模式///原型对象概念:只要创建新函数,就会根据一组特定规则为函数创建prototype属性,指向函数的原型对象。//在默认情况下,所有原型对象都会自动获得constructor(构造函数)属性,其中包含一个方向 prototype 属性函数的指针。//在默认情况下,所有原型对象都会自动获得constructor(构造函数)属性,其中包含一个方向 prototype 属性所在函数的指针。//通过这个构造函数,可以继续向原型对象添加其他属性和方法。///创建自定义构造函数后,其原型对象默认只会获得 constructor 属性;至于其他方法,都是从 Object 继承而来。//当调用构造函数创建新的例子时,例子的内部将包含一个指针(__proto__),指向构造函数的原型对象。//构建函数的原型对象的主要目的是让多个对象实例共享其中包含的属性和方法。Person.prototype.country = 'chinese';Person.prototype.sayCountry = function() {    show(this.country);};var zs = new Person('zhangsan', 20);var ls = new Person('lisi', 20);zs.sayCountry();//chinesels.sayCountry();//chineseshow(zs.sayCountry === ls.sayCountry); //true//3、构造函数模式和原型模式//这种模式的组合使用是创建自定义类型最广泛、认可度最高的方式。构建函数模式用于定义实例属性,而原型模式用于定义方法和共享属性。构建函数模式用于定义实例属性,而原型模式用于定义方法和共享属性。//这样,每个例子都有自己的例子属性副本,共享方法的参考,最大限度地节省内存。///包装私有属性和方法var Book = (function() {// Private static attributes.// 私有静态属性var numOfBooks = 0;// Private static method.// 私有静态函数function checkIsbn(isbn) {//... return isbn != null;};// Return the constructor.  // 返回构造器returnnn function(newIsbn, newTitle, newAuthor) {// Private attributes. // var的私有属性 isbn, title, author;// Privileged methods.// 特权函数是指可访问私有属性的函数this.getIsbn = function() {return isbn; };this.setIsbn = function(newIsbn) {if(!checkIsbn(newIsbn))throw new Error('Book: Invalid ISBN.');isbn = newIsbn; };this.getTitle = function() {return title;};this.setTitle = function(newTitle) {title = newTitle || 'No title specified'; };this.getAuthor = function() {return author;};this.setAuthor = function(newAuthor) {author = newAuthor || 'No author specified';};// Constructor code.// Keep track of how many Books have been instantiated numOfBooks++;// with the private static attribute.if(numOfBooks > 50)throw new Error('Book: Only 50 instances of Book can be created.');this.setIsbn(newIsbn);this.setTitle(newTitle);this.setAuthor(newAuthor);};})();// Public static method.  Book.convertToTitleCase = function(inputString) {//...};// Public, non-privileged methods. // 非特权函数是指Book的公共方法,不需要访问私有数据.prototype = {display: function() {show("isbn = " + this.getIsbn() + ", title = " + this.getTitle() + ", author = " + this.getAuthor());}};Book.prototype.constructor = Book;try {var theHobbit;for(var i = 0; i < 60; i++)theHobbit = new Book('0-395-07122-4-' + i, 'The Hobbit', 'J. R. R. Tolkien');} catch (error) {show(error);//Error: Book: Only 50 instances of Book can be created.}theHobbit.display();//isbn = 0-395-07122-4-49, title = The Hobbit, author = J. R. R. Tolkien// ]]></script>  </body></html>