JS模块_require,new机制_this机制

代码模块,导出对象

我们所有的代码不能都写到一个文件里面,如何分开文件? 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));
总结一下:

1: js里面代码可以放在不同的文件里,称为代码模块;
2: 一个模块需要引用其它模块代码的时候使用 require;
3: require:
(1) 如果是第一次调用,那么就加载,执行脚本;
(2) 每个代码模块由module.exports 导出的对象;
(3) 每次require的时候,都返回module.exports;
(4) 如果不是第一次执行,那么直接返回module.exports;

代码规范

一般我们会用和代码名字同名的变量,来接住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)
} 

// 函数调用, this,可能是一个不确定的值;
my_func(3 , 4); 
// 函数.call: 显示的传递this。注意:传的是第一个逗号前面的,后面的“3, 4”没有被传
// 最好执行返回函数结果
my_func.call({name: "blake"}, 3, 4);

// 表.key 来隐式的传递this;
var tools = {
    my_func: my_func,
}
// 表.函数key() --> this就传为表,在这里为tools这个表
tools.my_func(3 ,4); 
强制绑定 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); 

my_func(3, 4) 
call 与 bind 有什么区别呢?

bind最牛的地方是什么?是绑定this的时候,
不是由调用者来决定

//显示的传递 this 也没用
new_func.call({name: "blake_test"}, 3, 4)
总结
  1. 在函数里面访问this, this是什么是由调用的环境来决定的, 是不确定的,我们一般不使用;
  2. 显式的传递this, 函数.call(this对象, 参数)
  3. 隐式的传递this, 表.key_函数(参数), this--> 表。注意:“key_函数”意思是key指向的一个函数
  4. 强制bind this, 函数.bind(this对象): 产生一个强制bind this的新的函数对象; bind 优先级别是最高的;

new 机制 与 构造函数

如何构造“类”,并用“类”构造出来实例?

new 机制重点:new 对象下的 this 是表
用法

1: js 构造函数: 普通的函数(参数),一般和类的名字是一样的;

2: new +构造(参数1, 参数2....);
(1)先创建一个{}对象;
(2)将这个新对象绑定到函数里面的this;
(3)构造函数对象的表 prototype 复制给新表 proto
(4) 返回新创建的对象;

3: 表.函数调用搜索顺序,现在key, value里查找,再到proto里找;

function person(name, age) {
    this.name = "chengbo";
    this.age = "22";
}

var obj = new person
console.log(obj); //person { name: 'chengbo', age: '22' }
function person(name, age) {
        //对表进行初始化,向表里添加 key 和 value;
    this.name = name;
    this.age = age;
}

// 机制1 每一个函数对象都有一个叫做“prototype”的表;
//person.prototype,“函数.表”意思是这个表的名字,也叫函数person有个成员叫做prototype

console.log(person.prototype);

//1. 表可以携带很多对象和value
//2. 往person.prototype这个表里添加key, 这个key是个函数对象
person.prototype.get_age = function() {
    return this.age;
}

// 机制2: new 关键字 + 函数(参数) 做了下面4个事情

// step1: 创建了一个新的表 {};
// step2: 会把创建的新的表通过 this 显示传递,并调用构造函数person
// 进入到构造函数person之后,“person构造函数里面的this”就是刚新建的表“.__proto__”。
// step3: 构造函数里面 prototype 这个表赋值到新表“.__proto__”里
// 新表“.__proto__”完全复制了person.prototype这个表里面的内容
// step4: “返回”这个新的表;

// new 函数起的作用是构造出来 一个表的实例,或者说同一个类型的不同的对象
// 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);

// __proto__: get_age--> 函数对象;
console.log(xiaoming.__proto__); 
// 新表里面会有一个.__proto__的key,同时.__proto__也是一个表,复制了person.prototype表里的key和value
搜索机制;
// 当我们在一个表里使用key的时候,
// 首先我们会在表里面找, 如果找到就直接使用这个key,所对应的value;
// 如果没有找到,我们会去__proto__这个里面找,找到就用;
// 进入函数的时候,如果没有强制绑定this,就会根据隐式的调用规则。
//把xiaoming---> this get_age

var ret = xiaoming.get_age()
ret = blake.get_age();
console.log(ret);
new 机制做的事情
function new_person(name, age) {
    // step1: 在函数里创建一个新的表
    var instance = {};
    // step2: 通过显式的传递this,把instance传给函数person,就会有成员
    person.call(instance, name, age);
    // step3: instance加一个成员__proto__,这个成员是一个新的表,所以表里面可以有表
    instance.__proto__ = {};
    // step4: 将person里面的prototype这个表复制过来;
    for(var key in person.prototype) {
        instance.__proto__[key] = person.prototype[key];
    }
    // step5: 返回实例instance
    return instance;
}


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);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,590评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,808评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,151评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,779评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,773评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,656评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,022评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,678评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,038评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,411评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,005评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2 343

推荐阅读更多精彩内容

  • pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类: pyspark.sql...
    mpro阅读 9,446评论 0 13
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,717评论 2 17
  • title: js面向对象date: 2017年8月17日 18:58:05updated: 2017年8月27日...
    lu900618阅读 559评论 0 2
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,054评论 1 10
  • 葡萄藤PPT JS中this的指向 大家好,我是IT修真院郑州分院第6期的学员王栋,一枚正直、纯洁、善良的前端程序...
    17064阅读 614评论 0 2