title: 面向对象二、函数
date: 2017-06-16 17:45:11
tags: javascript笔记
创建方式
声明式
function foo (){
}表达式
var foo = function () {
}构造函数方式
格式:new Function(arg1,arg2,......,argn,body)
arg1,arg2,......,argn是可选的形参列表，表达为创建出来函数的形参列表，数据类型是字符串
body 字符串类型，表达为创建出来的函数的函数体部分
var foo = new Function('val1','val2','return val1 + val2');
console.log(foo(1,2)); // 3
console.log(foo);
/*
function anonymous(val1,val2){
return val1 + val2
}
*/函数的原型链
由于函数也可以通过构造函数来创建，那么函数也是对象，对象都具有proto属性，有了proto属性也就说明它也具有原型链。
console.log(Object.constructor)
console.log(Array.constructor)
console.log(Date.constructor)
console.log(RegExp.constructor)
var foo = function(){}
console.log(foo.constructor)
// 打印的全都是 function Function() { [native code] }以上内置函数和自定义函数的构造函数都是Function()
结论：
-
所有函数都是Function的实例
-
那么也就是说，所有的函数的构造函数为Function
-
所有函数的原型对象为Function.prototype
console.log(foo.__proto__ === Function.prototype)
console.log(Object.__proto__ === Function.prototype)
console.log(Array.__proto__ === Function.prototype)
console.log(RegExp.__proto__ === Function.prototype)
console.log(Date.__proto__ === Function.prototype)
console.log(Date.__proto__ === Function.prototype)
// 打印的全都是true以上结构都为true,也就是说这些内置函数和自定义函数都是通过Function这个构造函数创建的，他们的原型对象proto也就是Function.prototype
函数原型链的绘制
绘制原型链时将函数（内置函数和自定义函数）成为函数对象，为了避免混淆，其他对象称为普通对象
Function.prototype 即是函数也是对象类型，而所有的原型对象都没有 prototype 属性，并且只有原型对象才有 constructor 属性
arguments对象
arguments对象属性
length：实参的个数
callee：返回正在执行的函数；应用在匿名函数递归调用
function foo (){
console.log(arguments);
}
foo()
/*
[callee: function, Symbol(Symbol.iterator): function]
callee:function foo()
length:0
*/函数相关属性
caller：返回调用当前函数的函数
length：形参的个数
name：存的函数的名字
function foo (){
console.log(foo.caller); // function fn(){foo()}
console.log(foo.length); // 0
console.log(foo.name); // foo
}
(function fn (){
foo()
})()函数重载
在Javascript中函数是不能重载的，如果有函数重载Javascript会认为这是两个不同的函数，第二个会覆盖第一个，如下：
function foo () {
}
function foo (arguments) { // 这个函数会覆盖上一个函数
}但是Javascript可以模拟函数的重载，以前一直是这样写的，只是没有灌输重载这个概念。如下：
function foo() {
// 如果函数没有传递实参就打印false
if (arguments.length == 0) {
return false;
}
// 如果传递两个实参，就将两个实参拼接起来在打印出来
if (arguments.length >= 2) {
var str = "";
for (var i = 0, l = arguments.length; i < l; i++) {
str = str + arguments[i];
}
return str;
}
}
//每个功能都是函数的重载函数递归
递归就是在函数体里自己调用自己
需要注意的是递归调用时要有递归调用的开始条件和结束条件，不然会死循环。
function fn(){
fn()
}
//这就是递归函数，在内部调用自己，但是此时没有条件显示，所以会死循环下面通过两个案例来解释递归函数的用法和条件限制
求等差数列的第n项的值
步骤：得知道开始项的值，用v代替，每次增加的数字也就是差值，用d代替，要查找的第几项，用n代替
在这个例子中，n的值每次递减，递减到n===1的时候return v, 这就相当于整个函数有了值。也就是终止了再次进入调用函数本身。然后一步一步的把值返回。因为每次return都会+d,函数循环的次数也就是+d的次数。
每次函数调用自己都相当于进栈一次，循环调用了几次,栈里就有几个函数，当n===1时开始return，也就开始依次出栈。我们实际return的是v的值，每次出栈让v+d，然后根据d来确定是出几次栈，也就是做几次操作。
function dengCha(v, d, n) {
// 过滤n小于1的无效值
if (n < 1) {
return undefined;
}
// 如果n为1，就直接返回V 此时不要继续递归,让函数从v的值开始每次+d，加的次数就是循环调用的次数。
else if(n === 1){
return v;
}
// 此时如果传入的n值>1,就需要递归了
else {
return dengCha(v,d,n-1) + d
}
}用一张图来表示函数执行过程：
斐波那契函数
案例2：
fib数列 1,1,2,3,5,8,13,21,34，...
fib的规律：
1: 1
2: 1
3: 2
4: 3
5: 5
n: n-1+n-2
// 这是一个匿名函数，用v来接收匿名函数的返回值
var v = (function(n){
if(n < 1){
return undefined;
}else if(n === 1 || n ===2){
return 1;
}else {
return arguments.callee(n-1) + arguments.callee(n-2);
}}(6))
console.log(v);用一张图来表示函数内部操作步骤
函数的四种调用模式
普通函数执行
这声明一个函数后，就直接调用。这种模式下this指向window对象
function foo () {
console.log(1);
console.log(this === window);
}
foo();方法调用模式
通过一个对象来调用方法。把某一个函数当做对象的方法，this指向该方法的调用者
var obj = {
sayHi:function(){
console.log("hello");
console.log(this === obj); // true
}
}
obj.sayHi();构造函数模式
配合new操作符来调用函数。this指向当前函数创建的对象
function fn (name) {
this.name = name;
console.log(this); // fn {name: "tom"}
}
var f = new fn("tom");call/apply模式(上下文模式)
this是用户动态指定的，指定call or apply方法的第一个参数。只有函数对象才有call和apply方法
fn.call(thisobj,arg1,arg2,...,argN) thisobj是fn在执行时this指向的对象，arg1...argN是fn在执行时传入的实参列表
fn.apply(thisobj,[fn的实参]) 和call不同点是最后是以数组的形式传递实参的
注意：在非严格模式下，如果thisobj赋值为null或者不传实参，此时this -> window对象，就相当于普通函数执行模式。
function fn (name) {
this.name = name;
}
// 此时要借用构造函数的name属性
var o = {};
fn.call(o,"Jack") // 调用fn并将fn中的this指向对象o,传参'Jack'
console.log(o.name); // 打印了Jack
fn.apply(o,['tim']) // 用apply方法达到相同作用call/apply模式的应用
数组的合并
// 将arr2上的所有元素合并到arr1中
var arr1 = [1,2,3];
var arr2 = [4,5,6];
// 下面两种方法都可以,只要用数组调用push方法并改变this指向就可以
[].push.apply(arr1,arr2); // 原本push是改变[],现在是改变arr1
Array.prototype.push.apply(arr1,arr2); // 原本push是改变Array,现在是改变arr1借调方法（函数）
借用构造函数
function parent(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
// 借用构造函数（和对象冒充作用类似）
function child(name, age, gender, address) {
parent.call(this, name, age, gender);
this.address = address;
}
var c = new child('c',19,'女','地球');
//这样c就借用了parent的属性并且传了值。借调原生方法
// 求data中的最大值
var data = [67,89,190,23,10,100];
var max = Math.max.apply(null,data); // this指向无所谓时可以填null
// 想让括号里传的参数做怎样的操作就调用怎样的方法获取内置对象类型
console.log(typeof new Array); // 打印object
console.log(typeof new Date); // 打印object上面都是打印的object，这是弱类型的特点，但是我们有时需要打印array和date。
要实现这个功能要判断如果是内置对象，返回其类型名。如果是自定义对象，就返回object
function getType(obj){
var t = Object.prototype.toString.call(obj).slice(8,-1);
// 想让括号里传的参数做怎样的操作就调用怎样的方法
return t.toLowerCase();
}
getType(new Array) // 返回array将伪数组变成真数组
// 借用上面的函数getType
var doms = document.getElementsByTagName('div');
var domArr = Array.prototype.slice.call(doms);
console.log(getType(doms)); // 打印htmlcollection，伪数组
console.log(getType(domArr)); // 打印array，真数组数组去重
var arr = [1, 2, 2 , '1'];
function unique(a) {
var ret = [];
// 如果不支持indexOf方法
// 自己实现数组的indexOf方法，并添加到数组的原型对象上。
if(!ret.indexOf){
Array.prototype.indexOf = function(val) {
// this指向的就是 indexOf的调用者 （数组对象）
// 如果循环顺利执行完，就表示没有val值，返回-1；
// 否则返回val在当前数组中的下标值。
for(var i = 0,l = this.length; i < l; i++){
if(this[i] === val) return i;
}
return -1;
};
}
for(var i = 0,l = a.length;i < l; i++){
// 如果ret中不存在当前遍历到的元素，就添加到ret中
// 否则就不要添加
if( ret.indexOf(a[i]) === -1 ){
ret.push(a[i]);
}
}
return ret;
}
console.log(unique(arr)); // 打印[1,2,'1']
2846
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
