javascript面向对象--上下文调用模型

上下文调用方式是面向对象中比较复杂的一种应该方式,摆脱了传统的this的限制。下面是一些介绍,也会引申一些数组的操作方式来解释上下文调用的方式。
一、上下文 就是环境, 就是自定义设置 this 的含义 

语法:
1. 函数名.apply( 对象, [ 参数 ] );
2. 函数名.call( 对象, 参数 );

描述:
1. 函数名就是表示的函数本身, 使用函数进行调用的时候默认 this 是全局变量
2. 函数名也可以是方法提供, 使用方法调用的时候, this 是指当前对象.
3. 使用 apply 进行调用后, 无论是函数, 还是方法都无效了. 我们的 this, 由 apply 的第一个参数决定

注意:
1. 如果函数或方法中没有 this 的操作, 那么无论什么调用其实都一样.
2. 如果是函数调用 foo(), 那么有点像 foo.apply( window ).
3. 如果是方法调用 o.method(), 那么有点像 o.method.apply( o ).二、参数问题
无论是 call 还是 apply 在没有后面的参数的情况下( 函数无参数, 方法无参数 ) 是完全一样的.
```
	function foo() {
		console.log( this );
	}
	foo.apply( obj );
	foo.call( obj );
```

第一个参数的使用也是有规则的
1. 如果传入的是一个对象, 那么就相当于设置该函数中的 this 为参数
2. 如果不传入参数, 或传入 null. undefiend 等, 那么相当于 this 默认为 window
```
	foo();
	foo.apply();
	foo.apply( null );
	foo.call( undefined );
```
3. 如果传入的是基本类型, 那么 this 就是基本类型对应的包装类型的引用
	* number -> Number
	* boolean -> Boolean
	* string -> String

4.在使用 上下文调用的 时候, 原函数(方法)可能会带有参数, 那么这个参数在上下文调用中使用 第二个( 第 n 个 )参数来表示 ``` function foo( num ) { console.log( num ); } foo.apply( null, [ 123 ] ); // 等价于 foo( 123 ); ```三、数组案列
将伪数组转换为数组

传统的做法
```
	var a = {};
	a[ 0 ] = ‘a‘;
	a[ 1 ] = ‘b‘;
	a.length = 2;

	// 数组自带的方法 concat
	// 语法: arr.concat( 1, 2, 3, [ 4, [ 5 ] ] );
	// 特点不修改原数组
	var arr = [];
	var newArr = arr.concat( a );
```

由于 a 是伪数组, 只是长得像数组. 所以这里不行, 但是 apply 方法有一个特性, 可以将数组或伪数组作为参数
```
	foo.apply( obj, 伪数组 ); // IE8 不支持
```

将 a 作为 apply 的第二个参数
```
	var newArr = Array.prototype.concat.apply( [], a )
```

处理数组转换, 实际上就是将元素一个一个的取出来构成一个新数组, 凡是涉及到该操作的方法理论上都可以
1. push, unshift
2. slice
3. splice

push 方法

```
	用法:  arr.push( 1 ); 将这个元素加到数组中, 并返回所加元素的个数
		  arr.push( 1, 2, 3 ); 将这三个元素依次加到数组中, 返回所加个数

	var a = { length: 0 }; // 伪数组
	a[ a.length++ ] = ‘abc‘; // a[ 0 ] = ‘abc‘; a.length++;
	a[ a.length++ ] = ‘def‘;

	// 使用一个空数组, 将元素一个个放到数组中即可
	var arr = [];
	arr.push( a ); // 此时不会将元素展开, 而是将这个伪数组作为一个元素加到数组中
	// 再次利用 apply 可以展开伪数组的特征
	arr.push.apply( arr, a );
	// 利用 apply 可以展开伪数组的特性, 这里就相当于 arr.push( a[0], a[1] )
```

slice

```
	语法: arr.slice( index, endIndex )
	如果第二个参数不传, 那么就是 从 index 一致获取到结尾
	该方法不会修改原数组

	var a = { length: 0 };
	a[ a.length++ ] = ‘abc‘;
	a[ a.length++ ] = ‘def‘;

	// 假设他是一个数组, 就是应该 从 0 项开始截取到 最后
	// 如果可以的话, 应该 a.slice( 0 )
	// 但是他没有该方法
	// 借用 数组的 slice, 将 this 转换成 这个伪数组

	var arr = [];
	var newArr = arr.slice.apply( a, [ 0 ] );
```

求数组中的最大值

传统
```
	var max = arr[ 0 ];
	for ( var i = 1; i < arr.length; i++ ) {
		if ( arr[ i ] > max ) {
			...
		}
	}
```

在 js 中的 Math 对象中提供了很多数学函数. Math.max( 1,2,3 )

还是利用 apply 可以展开数组的特性
```
	var arr = [ 123456,12345,1234,345345,234,5 ];
	Math.max.apply( null, arr );
```
				
时间: 2024-11-03 21:30:46

javascript面向对象--上下文调用模型的相关文章

函数的四种调用模型

函数的四种调用模式在 js 中 无论是函数, 还是方法, 还是事件, 还是构造器, ... 其本质都是函数. 只是处在不同的位子而已. 四种: 函数模式方法模式构造器模式上下文模式1. 函数模式 特征: 就是一个简单的函数调用. 函数名的前面没有任何引导内容. function foo () {} var func = function () {}; ... foo(); func(); (function (){})();this 的含义: 在 函数中 this 表示全局对象, 在浏览器中是

JavaScript面向对象核心知识归纳

面向对象 概念 面向对象就是使用对象.面向对象开发就是使用对象开发. 面向过程就是用过程的方式进行开发.面向对象是对面向过程的封装. 三大特性 抽象性所谓的抽象性就是:如果需要一个对象描述数据,需要抽取这个对象的核心数据 提出需要的核心属性和方法 不在特定的环境下无法明确对象的具体意义 封装性对象是将数据与功能组合到一起,即封装 JS对象就是键值对的集合,键值如果是数据(基本数据.符合数据.空数据)就称为属性,如果键值是函数那么就称为方法 对象就是将属性与方法封装起来 方法是将过程封装起来 继承

Javascript 面向对象编程(一):封装

学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学习笔记,希望对大家学习这个部分有所帮助.我主要参考了以下两本书籍: <面向对象的Javascript>(Object-Oriented JavaScript) <Javascript高级程序设计(第二版)>(Professional JavaScript for Web Developers, 2nd

《Javascript面向对象精要》笔记

刚读过<Javascript面向对象精要>这本书,在现有的知识体系里面有一些新鲜的认识,记录一下. 原始类型和引用类型 Javascript存在两种类型:原始类型和引用类型.原始类型包括String.Number.Boolean.Null.Undefined,引用类型保存对象,其本质是对象所在内存位置的引用. 原始类型的赋值或者给函数传参,实际上都是传递原始类型值的拷贝: 引用类型则是引用的拷贝.修改其中一个引用的话,其他引用也会受到影响.如果对象中的某个属性也是对象,在对象拷贝时就会引入深拷

再谈javascript面向对象编程

前言:虽有陈皓<Javascript 面向对象编程>珠玉在前,但是我还是忍不住再画蛇添足的补上一篇文章,主要是因为javascript这门语言魅力.另外这篇文章是一篇入门文章,我也是才开始学习Javascript,有一点心得,才想写一篇这样文章,文章中难免有错误的地方,还请各位不吝吐槽指正 吐槽Javascript 初次接触Javascript,这门语言的确会让很多正规军感到诸多的不适,这种不适来自于Javascript的语法的简练和不严谨,这种不适也 来自Javascript这个悲催的名称,

JavaScript学习笔记(三)——this、原型、javascript面向对象

一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化,当然也可以使用call.apply修改this指向的对象.它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用 1.1.JavaScript中函数与方法的区分 在面向过程的语言中我们习惯把完成某个特定功能的代码块称为“函数”或“过程”,当然过程一般没有返回值.在面向对象语言中我们把对象的功能

Javascript面向对象研究心得

这段时间正好公司项目须要,须要改动fullcalendar日历插件,有机会深入插件源代码.正好利用这个机会,我也大致学习了下面JS的面向对象编程,感觉收获还是比較多的. 所以写了以下这篇文章希望跟大家探讨探讨JS的面向对象,本人资历尚浅,还望各位大神多多不吝赐教. 总述: 如今的发展趋势是,JS越来越面向对象化.而JS本身并未像Java,C#等语言,实现了明显的继承,封装等,我们须要通过JS本身的方式来模拟这些面向对象的方式. Jquery的一些东西: 1.each方法: 这是在js面向对象编程

javascript面向对象(一):封装

本文来自阮一峰 学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学习笔记,希望对大家学习这个部分有所帮助.我主要参考了以下两本书籍: <面向对象的Javascript>(Object-Oriented JavaScript) <Javascript高级程序设计(第二版)>(Professional JavaScript for Web Develop

Javascript 面向对象编程:封装

学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. ============================ Javascript 面向对象编程(一):封装 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果我们要把"属性"