2018-04-06 面向对象编程

1. This关键字

这三个方法都可以绑定this值

1. call()

  • this
    var obj = {};
    
    var f = function () {
      return this;
    };
    
    f() === window // true
    f.call(obj) === obj // true
    
    call方法的参数,应该是一个对象。
    如果参数为空、null和undefined,正常模式下默认传入全局对象(window),严格模式下为undefined。
    call方法可以改变this的指向,指定this指向对象obj。
    var f = function () {
      return this;
    };
    
    f.call(5)    //Number {[[PrimitiveValue]]: 5}
    
    若call方法的参数是一个原始值,那么这个原始值会转成对应的对象
  • arguments
    function add(a, b) {
      console.log(arguments[0]);
      console.log(arguments[1]);
    }
    
    add.call(this, 1, 2) // 1,2,第一个参数传给this,后面的都存入arguments对象
    
    arguments是伪数组

2. apply()

apply方法的第一个参数用法和call一样,不同的是第二个参数必须是一个数组

function f(x, y){
  console.log(x + y);
}
f.apply(null, [1, 1]) // 2

所以利用这一点
(1)找出数组最大元素
JavaScript 不提供找出数组最大元素的函数。结合使用apply方法和Math.max方法,就可以返回数组的最大元素。

var a = [10, 2, 4, 15, 9];
Math.max.apply(null, a) // 15

(2)将数组的空元素变为undefined
通过apply方法,利用Array构造函数将数组的空元素变成undefined。

Array.apply(null, ['a', ,'b'])  
// [ 'a', undefined, 'b' ]

数组的forEach方法会跳过空元素,但是不会跳过undefined。

3. bind()

bind可以绑定this值

var d = new Date();
d.getTime() // 1481869925657

var print = d.getTime;
print() // Uncaught TypeError: this is not a Date object.

这样会报错,可以像下面这样,将getTime内部的this绑定为d对象

var print = d.getTime.bind(d);
print() // 1481869925657

下面这样也是,将inc方法内部的this绑定到counter

var counter = {
   count: 0,
   inc: function () {
     this.count++;
   }
};

var func = counter.inc.bind(counter);
func();
counter.count // 1

还可以绑定其他对象

var counter = {
   count: 0,
   inc: function () {
      this.count++;
   }
};

var obj = {
   count: 100
};
var func = counter.inc.bind(obj);
func();
obj.count // 101

bind还可以绑定原函数的参数

var add = function (x, y) {
   return x * this.m + y * this.n;
}

var obj = {
  m: 2,
  n: 2
};

var newAdd = add.bind(obj, 5);  //5相当于绑定了add函数里的x
newAdd(5) // 20,这个5相当于add函数里y

若bind第一个对象为null,等于将this绑定到全局对象(window)
bind的注意事项:
(1)每一次返回一个新函数
bind方法每运行一次,就返回一个新函数,所以监听事件的时候,要谨慎使用。更多

2. 用函数模拟一个类

function Animal(species) {  //Animal就是一个对象
    this.species = species; //自有属性
}
    
Animal.prototype = {
    constructor: Animal,
    walk : function () {},  //走路的代码
    run: function () {},    //跑步的代码
    eat: function () {},    //吃东西的代码
    sleep: function () {}   //睡觉的代码
};

let cat = new Animal('cat')  

cat.specise === cat     //true
//并且cat对象的__proto__指向Animal.prototype,有里面的动作属性

加new的三个作用

  • 帮你创建临时对象,用this就可以访问到,比如上面的this.species
  • 帮你绑定原型,使Animal里有个隐藏属性__proto__指向Animal.prototype
  • 帮你return临时对象Animal.prototype.constructor === Animal

未完待续...

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

推荐阅读更多精彩内容

  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 4,521评论 0 5
  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,114评论 0 13
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,211评论 0 4
  • title: js面向对象date: 2017年8月17日 18:58:05updated: 2017年8月27日...
    lu900618阅读 559评论 0 2
  • 涵义 this关键字是一个非常重要的语法点。毫不夸张地说,不理解它的含义,大部分开发任务都无法完成。 首先,thi...
    许先生__阅读 548评论 0 4