Javascript OOP -- 深入理解函数

CollinPeng 发布于2019-08-20 15:46 / 3326人阅读

摘要：写在前面写这篇文章计划想了很久，终于付诸行动。此时所指向的空间变成了一个，因为在中函数名相同的后面的会覆盖前面。特别注意函数的传入参数与调用无关如果调用传入两个参数，而形参只有一个，就只会匹配一个参数。

写在前面 :

写这篇文章计划想了很久，终于付诸行动。一直不知道该从哪里写，或许文章有错误的地方，如果您发现了文章的错误，请指正！谢谢！
好句欣赏:
人生为棋，我愿为卒行动虽慢可谁曾见我退后一步?

深入函数与对象

函数就是一个特殊的对象(Object),是Function类的实例,其实在内存中存储的操作是通过一个键值对来存储.
函数虽然是一个对象，但和对象有一定的区别.

函数的定义与内存模型:

function fn1 () {
    alert("123");
}
var fn2 = fn1;

fn2();    //用fn2完成函数调用,结果是123

这段代码我相信很多人都能看懂，我们来看看它的内存模型:

举个例子证明改变fn1的时候fn2并没有改变，还是上面的例子:

function fn1 () {
    alert("123");
}
var fn2 = fn1;
fn1 = function () {
    alert("111");
};
fn2();    //用fn2完成函数调用,结果还是123

通过上面的两个例子，虽然fn2 = fn1但是他们指向的是不同的空间，我们可以证实了函数是通过对象的拷贝来完成。

对象的定义与内存模型:

var obj1 = new Object();
var obj2 = obj1;
obj1.name = "lee";

alert(obj2.name);    //lee

我们来看看它的内存模型，画的有点渣~๑乛◡乛๑

通过上面我们就可以看出，此时修改obj1或者obj2都会将两个值完成修改，对象是通过引用来指向完成对象的赋值的.

动态语言Javascript函数的灵活性

Javascript中函数真的有重载么?

function sum (num1,num2){
    return num1 + num2;
}
function sum (num1){
    return num1 + 10;
}
alert(sum(10));    //20

我们不难看出，结果为20 <= (这是一句废话)...我们再看下面的代码:

function sum (num1,num2){
    return num1 + num2;
}
function sum (num1){
    return num1 + 10;
}
alert(sum(10,20));    //??

我们来思考一下，它的结果返回什么？

没错，结果返回为20。此时sum所指向的空间变成了一个，因为在JS中函数名相同的后面的会覆盖前面。
特别注意：函数的传入参数与调用无关！！！
如果调用传入两个参数，而形参只有一个，就只会匹配一个参数。
所以说，在Javascript中函数没有重载的功能！

作为值的传递

function fn (fun,arg){
    return fun(arg);
}
function say (str){
    alert("Hello"+str);
}
fn(say,"World");      //返回Hello World

动态语言的灵活性非常高，我们不难看出函数还可以作为值传递到另外的一个函数中去调用.

作为返回值 (一道例题引发的思考)

我们先来说说数组的排序功能(sort)，看例子：

var arr = [1,2,1,3,5,11];
 
console.log(arr.sort());    //[1, 1, 11, 2, 3, 5]

默认的排序是按字符串来排序的，这么排序肯定是我们不希望看到的。我们都知道sort()方法可以传递一个函数,我们来改进一下:

var arr = [1,2,1,3,5,11];

function bySort(num1,num2) {
    return num1 - num2;
}
console.log(arr.sort(bySort)); //[1, 1, 2, 3, 5, 11]

一切看起来都很正常，因为这是数字排序，那么如果我们想给对象排序呢?

function Fn (name,age) {
   this.name = name;
   this.age = age;
  }
 var p1 = new Fn("lee",23);
 var p2 = new Fn("zhangsan",33);
 var p3 = new Fn("Dave",13);
 var ps = [p1,p2,p3];
 ps.sort();        //无效!

我们可以按照刚才的思路再写一个给姓名的排序的函数，传入进sort()中进行排序:

function sortByName(obj1,obj2){
   if (obj1.name > obj2.name)return 1;
   else if(obj1.name == obj2.name)return 0;
   else return -1;
}
 ps.sort(sortByName);

那么问题来了，如果我们要写年龄排序呢？是不是还要写一个方法，如果还有很多呢，比如地址按字母排序呢？我们来按照函数作为返回值来实现动态排序:

function sortByPro(dynamic) {
  function sortFn (obj1,obj2) {
    if (obj1[dynamic] > obj2[dynamic])return 1;
    else if (obj1[dynamic] == obj2[dynamic]) return 0;
    else return -1;
    }
  return sortFn;
 }
 ps.sort(sortByPro("age"));

就暂时先写到这里，这是不过是总结的一些小的技巧与心得，如果哪里有错误请指正！谢谢！

                                *Brian.lee著*

GPU云服务器云服务器深入理解javascript 深入理解系列深入理解linux 深入理解webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82476.html

浅谈 OOP JavaScript [完结章] -- 继承

摘要：构造函数通过原型继承了构造函数和原型，这就形成了一个链条，通俗的讲就是原型链继承。而且方法只能冒充构造函数里面的属性和方法而无法冒充原型对象里面的属性和方法还有最大的问题就是重复使用。前言：写到这里，差不多就把OOP完结了，写了几篇OOP的文章，但是只是略懂皮毛，可能深入的OOP还有很多，但是我感觉写到这里也算是差不多完结了。继承继承是面向对象比较核心的概念，其他语言可能实现...

张利勇 2019-08-22 10:49 评论0 收藏0
JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0
Underscore 整体架构浅析

摘要：支持形式的调用这其实是非常经典的无构造，其实就是一个构造函数，的结果就是一个对象实例，该实例有个属性，属性值是。前言终于，楼主的「Underscore 源码解读系列」underscore-analysis 即将进入尾声，关注下 timeline 会发现楼主最近加快了解读速度。十一月，多事之秋，最近好多事情搞的楼主心力憔悴，身心俱疲，也想尽快把这个系列完结掉，也好了却一件心事。本文...

ningwang 2019-08-20 11:59 评论0 收藏0
JavaScript对象的深入理解（二）

摘要：原型的概念不同于构造函数模式创建对象只能单级即成，得益于原型链的概念，原型模式可实现类似其他语言的多级继承。组合使用构造函数与原型模式单一使用原型对象的问题在于所有属性皆共享，若不想共享某属性，则可放入构造函数中。之前提到，构造函数方法创建对象存在着方法不共享的问题，因此引申出了原型模式创建对象原型模式原型模式旨在创建一个模版对象，该对象的所有属性和方法被其实例所共享。原型的概...

tommego 2019-08-21 17:24 评论0 收藏0
深入浅出JavaScript之call()、apply()方法

摘要：的作用在中，方法和方法都是为了改变函数运行时上下文而存在的，换句话说就是为了改变函数体内部的指向。欢迎前端大牛纠正错误，如有错误我会及时改正。写在前面：隔了很长时间了，也不知道写点什么。最近一直在研究ES6，一直想写出来的文章能对初学者或者是在学习JS路上有所帮助的。这就是我的初衷。 call、apply的作用在JavaScript中，call()方法和apply()方法都是为了...

Cympros 2019-08-20 14:16 评论0 收藏0