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()方法来定义一个类,让它继承基类;