面向对象的JavaScript-005-Function.prototype.call()的3种作用

1.

1 // call的3种作用
 2     // 1.Using call to chain constructors for an object
 3     function Product(name, price) {
 4       this.name = name;
 5       this.price = price;
 6
 7       if (price < 0) {
 8         throw RangeError('Cannot create product ' +
 9                           this.name + ' with a negative price');
10       }
11     }
12
13     function Food(name, price) {
14       Product.call(this, name, price);
15       this.category = 'food';
16     }
17
18     function Toy(name, price) {
19       Product.call(this, name, price);
20       this.category = 'toy';
21     }
22
23     var cheese = new Food('feta', 5);
24     console.log(cheese);
25     var fun = new Toy('robot', 40);
26     console.log(fun);
27
28     // 2.Using call to invoke an anonymous function
29     var animals = [
30       { species: 'Lion', name: 'King' },
31       { species: 'Whale', name: 'Fail' }
32     ];
33
34     for (var i = 0; i < animals.length; i++) {
35       (function(i) {
36         this.print = function() {
37           console.log('#' + i + ' ' + this.species
38                       + ': ' + this.name);
39         }
40         this.print();
41       }).call(animals[i], i);
42     }
43
44     // Using call to invoke a function and specifying the context for 'this'
45     // In below example, when we will call greet the value of this will be bind to object i.

46     function greet() {
47       var reply = [this.person, 'Is An Awesome', this.role].join(' ');
48       console.log(reply);
49     }
50
51     var i = {
52       person: 'Douglas Crockford', role: 'Javascript Developer'
53     };
54
55     greet.call(i); // Douglas Crockford Is An Awesome Javascript Developer

面向对象的JavaScript-005-Function.prototype.call()的3种作用

You can do anything you set your mind to, man!

Original: https://www.cnblogs.com/shamgod/p/5523504.html
Author: shamgod
Title: 面向对象的JavaScript-005-Function.prototype.call()的3种作用

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/536417/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • javaScript系列 [40]-defineProperty

    404. 抱歉,您访问的资源不存在。 可能是网址有误,或者对应的内容被删除,或者处于私有状态。 代码改变世界,联系邮箱 contact@cnblogs.com 园子的商业化努力-困…

    JavaScript 2023年5月29日
    072
  • 【原】javascript笔记之splice和slice这两兄弟为毛这么难记

    容易混淆,决定做下笔记!!! splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。 语法 arrayObject.splice(index,howmany,it…

    JavaScript 2023年5月29日
    062
  • javascript算法-插入排序

    原理跟java那篇文章一样,只是语言不同而已 var InsertSort = function( _n ){ this.maxSize = _n; this.arr = []; …

    JavaScript 2023年5月29日
    094
  • javascript 可选链 “?.”

    可选链 ?. 是一种访问嵌套对象属性的安全的方式。即使中间的属性不存在,也不会出现错误。 “不存在的属性”的问题 如果你才刚开始读此教程并学习 JavaSc…

    JavaScript 2023年5月29日
    065
  • JavaScript高级用法一之事件响应与网页交互

    事件会在页面加载完成后立即发生,同时执行被调用的程序。注意:1. 加载页面时,触发onload事件,事件写在标签内。 此节的加载页面,可理解为打开一个新页面时。 如下代码,当加载一…

    JavaScript 2023年5月29日
    095
  • 使用 Jasmine 进行测试驱动的 JavaScript 开发

    Jasmine 为 JavaScript 提供了 TDD (测试驱动开发)的框架,对于前端软件开发提供了良好的质量保证,这里对 Jasmine 的配置和使用做一个说明。 目前,Ja…

    JavaScript 2023年5月29日
    086
  • 面向对象的JavaScript-007-Function.prototype.bind() 的4种作用

    1. 1 // Function.prototype.bind() 的作用 2 3 // 1.Creating a bound function 4 this.x = 9; 5 v…

    JavaScript 2023年5月29日
    065
  • javascript 字符串转驼峰方法

    // 字符串转驼峰 function strToHump(str){ let strArr = str.split(‘-‘) for(let i =1; i < strArr…

    JavaScript 2023年5月29日
    057
  • [转]JavaScript ES6 class指南

    EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民。但是目前为止,这些关于类的新关键字仅仅是建立在 旧的原型系统上的语法糖,所以它们…

    JavaScript 2023年5月29日
    049
  • 关于javascript的form对象

    首先看下面的代码: 1 2 在JS代码中,上面注释掉的写法可以在FF中正常运行,但是在IE中不可以。因为do是ie版js的关键字。但是改成[‘do’]就可以…

    JavaScript 2023年5月29日
    097
  • Javascript技巧

    Javascript数组转换为CSV格式 首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件。则我们可以使用如下的…

    JavaScript 2023年5月29日
    063
  • JavaScript 设计模式分类

    设计模式的目的是为了提高代码的整洁性、降低代码的资源占用量。 JS中的设计模式可分为以下三种: 说明:专注于处理对象创建的机制,以合适的方式创建对象,以此来降低创建对象过程的复杂性…

    JavaScript 2023年5月29日
    092
  • javaScript系列 [47]-Iterator迭代器

    404. 抱歉,您访问的资源不存在。 可能是网址有误,或者对应的内容被删除,或者处于私有状态。 代码改变世界,联系邮箱 contact@cnblogs.com 园子的商业化努力-困…

    JavaScript 2023年5月29日
    071
  • 一张图带你搞懂Javascript原型链关系

    在某天,我听了一个老师的公开课,一张图搞懂了原型链。 老师花两天时间理解、整理的,他讲了两个小时我们当时就听懂了。 今天我把他整理出来,分享给大家。也让我自己巩固加深一下。 就是这…

    JavaScript 2023年5月29日
    073
  • Symbols 是 JavaScript 最新推出的一种基本类型

    Symbols 的出现是为了什么呢? 翻译自 medium Symbols 是 JavaScript 最新推出的一种基本类型,它被当做对象属性时特别有用,但是有什么是它能做而 St…

    JavaScript 2023年5月29日
    052
  • 你不知道的 JavaScript 系列中( 28 ) - && 和 ||

    && 和 || 运算符的返回值并不一定是布尔类型,而是两个操作数其中一个的值。 对于 || 来说,如果条件判断结果为 true 就返回第一个操作数(a 和 c)的值…

    JavaScript 2023年5月29日
    064
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球