代码模块与面向对象
来源:互联网 发布:北京人口数据统计 编辑:程序博客网 时间:2024/06/05 08:20
一、代码模块
1、js里面代码可以放在不同的文件里,称为代码模块;
2、一个模块需要引用其它模块代码的时候使用 require;
3、 require:
(1) 如果是第一次调用,那么就加载,执行脚本;
(2) 每个代码模块由module.exports 导出的对象;
(3) 每次require的时候,都返回module.exports;
(4)如果不是第一次执行,那么直接返回module.exports;
utils.js
//定义一个表utils,表内定义一个函数random_intvar utils = { random_int: function (start, end) { var num = start + (end - start) * Math.random(); num = Math.floor(num); return num; }, };module.exports = utils; //导出表utils,也可以直接到导出表中的函数
main.js
var utils = require("./utils");console.log(utils);var num = utils.random_int(10, 20);console.log(num);
二、this
1、function.call(this, param1, param2);
2、表.函数名(参数):
(1) 函数里面有一个this对象,指的是外面的表;
(2) 如果外面没有表,那么this为undefine;
(3) 函数.bind(数据对象),会产生一个新的函数对象,调用该函数的this,就是外面bind的对象;
function test_func(name, sex) { this.name = name; this.sex = sex;}// this, 类是与一个参数一样的,显式传递this// 函数对象.call(实例, 参数)var xiaoming = {};test_func.call(xiaoming, "xiaoming", 10);console.log(xiaoming);// 隐式传递thisvar xiaohong = { name: "xiaohong", test_func: function() { console.log(this); }, test_bind: function() { console.log(this); }.bind(4),};// 隐式的传递this,将xiaohong 作为this,传给该函数。xiaohong.test_func();xiaohong.test_bind();// 强制传递this;var func = function() { console.log(this);}.bind(xiaohong);func();func = function() { console.log(this);}// bind是在原来的对象的基础上,产生了一个新的函数对象;强制bind this,优先级额比其它的都高;func = func.bind(xiaohong);func();func.call(4);// 强制bind > 显示 > 隐式xiaohong.test_func.call(4);
三、new与构造函数
1、js 构造函数: 函数(参数),一般和类名一样;
2、new +构造(参数1, 参数2….);
(1)先创建一个{}对象;
(2)将这个新对象绑定到函数里面的this;
(3)构造函数对象的prototype 复制给新对象的 proto
(4) 返回新创建的对象;
3、表.函数调用搜索顺序,现在key, value里查找,再到proto里找;
function person(name, age) { this.name = name; this.age = age;}person.prototype.test_func = function() { console.log("person test_func called!!!!"); console.log(this);};var p = new person("xiaohong", 10);console.log(p);p.test_func();
运行结果:
person { name: ‘xiaohong’, age: 10 }
person test_func called!!!!
person { name: ‘xiaohong’, age: 10 }
四、原型引用
1:每个函数对象都有prototype属性;
3: clone一个函数对象的prototype;
(1)定义一个空函数;
(2)空函数的prototype = 函数对象的prototype;
(3) 新构造函数.prototype = new 空函数();
// 每一个函数对象都有一个prototype变量,指向一个对象,// 什么也没有就为{}var func_temp = function() { console.log("func_temp####");};console.log(func_temp.prototype);// end// prototype是一个对象,所以可以扩充key: value;func_temp.prototype.test_func = function() { console.log("test_func", this);};func_temp.prototype.test_func2 = function() {};// step1 var a = {};// step2 a __proto__: prototype 的浅复制;// step3 实例 作为this,传递给后面的函数// step4 调用这个函数;var data = new func_temp();// 两个表,但是里面的值一样;console.log(data.__proto__);console.log(func_temp.prototype);// data is 表;data.name = "XXXXXX"data.__proto__.test_func();// 把data, 作为this,传递给 data.__proto__对象里面的函数;data.test_func(); // ---> data.__proto__.test_func.call(data);data.__proto__.test_func.call(data);data.test_func = function() { console.log("new test_func", this);}data.test_func(); // data.key_func, 首先会在实例的表里面搜索,有没有这样的key,如果没有,那么再到对象的__proto__里面搜索;
五、js实现继承
1、子类clone 基类构造函数的prototype;
2、子类和基类如果有同名的方法,会现在当前这个类的函数;
3、子类的实例显示的调用基类的函数
基类.prototype.函数名字.call(实例, 参数1,参数2);
4、编写一个Class()方法来定义一个类,让它继承基类;
// 定义个类function Point() { this.xpos = 0; this.ypos = 0;}Point.prototype.set_pos = function(x, y) { this.xpos = x; this.ypos = y;}Point.prototype.get_ypos = function() { return this.ypos;}// end var p1 = new Point();var p2 = new Point();p1.set_pos(10, 10);p2.set_pos(100, 100);console.log(p1.get_ypos());console.log(p2.get_ypos());// js 继承var Person = function() {};Person.prototype.set_name = function(name) { this.name = name; console.log("set_name called");};Person.prototype.set_age = function(age) { this.age = age;};Person.prototype.test_func = function() { console.log("person test_func");};// 定义一个人;var Man = function() {};// Man.prototype();// 做法(1)// Man.prototype = Person.prototype; // ?可以吗?// 在原来的基类的prototype做一次浅拷贝var Super = function() {};Super.prototype = Person.prototype;Man.prototype = new Super();Man.prototype.set_sex = function(sex) { this.sex = sex;};Man.prototype.test_func = function() { Person.prototype.test_func.call(this); console.log("Man test_func");}var m = new Man();m.set_name("xiaoming");m.set_age(10);m.set_sex(0);console.log(m);m.test_func();// end function Class(params) { var new_class = function() {}; // 继承基类的方法 if (params.extend) { var Super = function() {}; Super.prototype = params.extend.prototype; new_class.prototype = new Super(); } for(var key in params) { if (key == "extend") { continue; } new_class.prototype[key] = params[key]; } return new_class;}var Student = Class({ extend: Person, set_class: function(class_num) { this.class_num = class_num; }, set_grade: function(grade) { this.grade = grade; }});var s = new Student();s.set_name("xiaohong");s.set_class(10);s.set_grade(2);console.log(s);
- 代码模块与面向对象
- <java与模块>第三章面向对象设计原则笔记
- 面向对象与面向对象
- 面向对象、代码块
- 面向对象 代码块
- 《面向对象程序设计与VC++实现》--第一章:例题代码
- JavaScript与as 1.0 基于面向对象的代码演示:
- 面向对象C与代码复用实现
- 面向组件与面向对象
- 面向过程与面向对象
- 面向对象与面向组件
- 面向对象与面向过程
- 面向对象与面向过程
- 面向对象 与 面向过程
- 面向对象与面向过程
- 面向对象与面向过程
- 面向对象与面向过程
- 面向对象与面向过程
- animate.css的使用
- 暑期实践经历
- 【maven install报错】Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile
- Codeforces #245 (Div. 2) D.Working out (dp
- 关于本地变量输出
- 代码模块与面向对象
- linux下重启oracle服务:监听器和实例
- android Map集合的遍历
- hdu 2026 首字母变大写
- DefaultHttpClient is deprecated
- 明天打字员 v2.1官方免费版
- 不可不用22 个iOS 小技巧
- CodeForces
- 回溯 NOIP2016 愤怒的小鸟(回溯AC poi?后来发现只是这个题剪枝很有效)