JS-基础-05.require、new、this、继承
一、代码模块
1:js里面代码可以放在不同的文件里，称为代码模块;
2:一个模块需要引用其它模块代码的时候使用 require;
3: require:
(1) 如果是第一次调用，那么就加载,执行脚本;
(2) 每个代码模块由module.exports 导出的对象;
(3) 每次require的时候，都返回module.exports;
(4)如果不是第一次执行，那么直接返回module.exports;
// 我们所有的代码不能都写到一个文件里面; // 分开文件，js--> 模块机制; // js 加载代码的 require() // step1: 加载指定的js代码，并执行; require("./utils") // 如果js代码已经被加载进来了，是不会执行的; require("./utils") // require 返回值, 返回加载进来的代码的module.exports 所指向的对象; // 多次require同一个模块，都回返回这个module.exports; var utils = require("./utils"); // console.log(ret); // 返回的是一个 {}, 因为你还没有指定module.exports导出的对象; // console.log(ret(3, 4)); console.log(utils.add(3, 4)); /* 总结一下 require: 去加载指定的js代码; require 会返回这个代码里面的module.exports,如果用户没有指定，module.export = {}; require 如果这个js代码已经被加载了，是不会再次装载执行的，但是仍然可以返回module.export所值的对象; */ // 一般我们会用和代码名字同名的变量，来接住require的返回值; var test = require("./test"); console.log(test);
二、this机制
1:function.call(this, param1, param2);
2:表.函数名(参数):
(1) 在函数里面 有一个this对象，指的是外面的表;
(2) 如果外面没有表，那么this为undefine;
(3) 函数.bind(数据对象)，会产生一个新的函数对象,调用这个函数的this,就是外面bind的对象;
// ===================this 机制========================= function my_func(lhs, rhs) { console.log(this); // 使用this; console.log(lhs, rhs) } my_func(3 ,4); // 函数调用, this,可能是一个不确定的值; // 函数.call: 显示的传递this my_func.call({name: "blake"}, 3, 4); // 表.key 来隐式的传递this; var tools = { my_func: my_func, } tools.my_func(3 ,4); // 表.函数key() --> this--> 表 // 强制绑定this, 优先级式最高的; // 函数.bind, 不会改变原来的函数对象的this,而是会产生一个新的函数对象，bind好了this var new_func = my_func.bind({name: "blake"}); // new_func(3 ,4); tools.my_func = new_func; tools.my_func(3, 4); // this 式tools? {name: "Blake"} my_func(3, 4) // 回答式一个强制绑定的表, // end // call 与bind 有什么区别呢？ // bind最牛的地方式什么？是绑定this的时候， // 不是由调用者来决定的,回掉函数，你会明白这个意义; // new_func.call({name: "blake_test"}, 3, 4) // 在函数里面访问this, this是什么是由调用的环境来决定的, 不确定的，我们一般不使用; // 显式的传递this, 函数.call(this对象, 参数) // 隐式的传递this, 表.key_函数(参数), this--> 表; // 强制bind this, 函数.bind(this对象): 产生一个强制bind this的新的函数对象; // bind 优先级别是最高的;
三、new与构造函数
1: js 构造函数: 普通的函数(参数),一般和类的名字是一样的;
2: new +构造(参数1, 参数2....);
(1)先创建一个{}对象;
(2)将这个新对象绑定到函数里面的this;
(3)构造函数对象的prototype 复制给新对象的 __proto__
(4) 返回新创建的对象;
// ===================new 与构造函数 机制========================= function person(name, age) { this.name = name; this.age = age; } // 机制1 每一个函数对象都有一个表, prototype; console.log(person.prototype); person.prototype.get_age = function() { return this.age; } // 机制2: new 关键字 + 函数(参数) // step1: 创建了一个新的表 {}; // step2: 创建的新的表--> this 传递，并调用person函数函数,进入person里面以后; // person函数里面this --> 表; // step3: person构造函数里面prototype这个表赋值到 新的表(this)的.__proto__ // step4: 返回这个新的表; // 函数起的作用，构造出来 一个表， new 函数 --> 构造函数, 初始化表对象; var blake = new person("Blake", 34); console.log(blake); var tom = new person("tom", 34); console.log(tom); var xiaoming = new person("xiaoming", 12); console.log(xiaoming); console.log(xiaoming.__proto__); // __proto__： get_age--> 函数对象; // end // 搜索机制; // 当我们在一个表里面 使用里面key的时候, // 首先我们会在表里面找, 如果找到就直接使用这个key,所对应的value; // 如果没有找到，我们会去__proto__这个里面找，找到我们就使用; // 进入函数的时候，如果没有强制绑定this,就会根据隐士的调用规则，把xiaoming---> this get_age var ret = xiaoming.get_age() ret = blake.get_age(); console.log(ret); // person --> 类, new person --> 类构造出来的 实例; // new person() function new_person(name, age) { // step1: var instacne = {}; // step2 person.call(instacne, name, age); // step3: instacne.__proto__ = {}; // step4: 将person里面的prototype这个表复制过来; for(var key in person.prototype) { instacne.__proto__[key] = person.prototype[key]; } // step5 return instacne; } var xiaohong = new_person("xiaohong", 12); console.log(xiaohong); // step1 xiaohong 这个表里面找; // step2 如果没找到,__proto__表里找--> 找到; ret = xiaohong.get_age(); console.log(ret); var xiaotian = { name: "blake", age: 30, __proto__: { get_age: person.prototype.get_age, }, } ret = xiaotian.get_age() console.log(ret);
四、原型引用
1:每个函数对象都有prototype属性;
3: clone一个函数对象的prototype;
(1)定义一个空函数;
(2)空函数的prototype = 函数对象的prototype;
(3) 新构造函数.prototype = new 空函数();
五、JS实现继承
1: 子类clone 基类构造函数的prototype;
2: 子类和基类如果有同名的方法，会现在当前这个类的函数;
3: 子类的实例显示的调用基类的函数
基类.prototype.函数名字.call(实例, 参数1,参数2);
4: 编写一个Class()方法来定义一个类,让它继承基类;
