javascript中的 object 和 function

ormsf 发布于2019-08-21 14:16 / 2467人阅读

摘要：在学习过传统的面向对象语言后，如，转学却有点不适应，特别是中所谓的对象函数，有时候会被搞晕。是可以动态的添加属性和方法的。不过在申明和使用上，的函数可很大不同。原因定义了两个相同名字的函数，该名字只属于后定义的函数所以在中没有重载这一特性。

在学习过传统的面向对象语言后，如 java c++，转学 javascript 却有点不适应，特别是 javascript 中所谓的 object（对象） function（函数），有时候会被搞晕。于是乎简单整理了下面的一些概念性的东西，方便学习和理解，会结合一点 java面向对象的知识加以说明。

先了解几个概念：
1.
首先 Object 在 ECMAScripe 中是指什么，在 ECMAScripe 中有5种简单数据类型：Undefined，Null,Boolean,Number,String. 还有一种复杂数据类型，那就是Object.

2.
引用类型---java中的类的概念
引用类型的值 --- java中对象的概念

3.
函数 ---- java 中方法的概念

4.
var --- 申明变量的一个操作符，因为 js 的变量是松散类型的，所谓松散就是可以用来保存任何数据，变量仅仅用来表示一个占位符而已，所以变量也不必指定什么 String ，int ，直接var 就可以了，注意对象可以用var 声明.

5.
Object(), 是什么 --- java中 Object 的构造方法， js 中 Object 的构造函数。

Object

js 是可以动态的添加属性和方法的。
比如创建一个 Object 实例

var obj = new Object();

变量 obj 就是 new Object() 的对象。
接下来：

var obj = new Object();
obj.name = "Zeng";
obj.age = 12;
obj.fun = function () {
    console.log(this.name+this.age);
}

但这样封装性不太好，所以比较经常使用的是对象字面量表示法

var obj = {
    name:"Zeng",
    age:12,
    fun:function () {
        console.log(this.name+this.age);
    }
}
obj.fun();  // 打印出： Zeng12

对象属性的访问：

1，采用  中括号
console.log(obj["name"]);

2，采用  点 ， 建议采用此方式
console.log(obj.name );

function
函数对于任何语言来说都是重要的一部分，函数是 js的叫法，你也可以理解为就是 java 的方法，c 语言的函数，都一样的。不过在申明和使用上， js 的函数可很大不同。

函数的一个示例：

function fun() {
     return "例子";
}
console.log(fun());  // 输出 ： ‘例子’

还可以这样：

var fun = function() {
    return "使用表达式创建函数"
};
console.log(fun()); // 输出 ： "使用表达式创建函数"

上面例子你会注意到函数没有函数名，只有一个变量名 fun ，表达式尾部还有一个；分号，
你可以把它当作声明一个变量的表达式就好理解了，声明其它变量是这么写的：

var name = "Zeng";  // 有变量名  ，还有 分号

来一个带参数的例子：

function fun() {
     return arguments[0] + arguments[1] + arguments[2];
}
console.log(fun("这是","一个","例子")); // 输出 ：“这是一个例子”

是不是有点奇怪，首先我创建的函数没有带参数的，在调用的时候有给参数，在函数里面也能获得参数并返回。
其实这里是要说明一点，js 函数不介意传递进来几个参数，也不在乎参数是什么类型！原因是函数内部接收参数是用一个数组来储存的！
数组也就是上面的 arguments ，数组当然不介意你传几个参数进来，有参数我加一，没参数我就是 null 。

咱们可以利用这个特性做个例子：

模仿方法的重载--利用参数个数的不同执行不同反应

function fun() {
    if(arguments.length == 1){
        return arguments[0]*10;
    }
    if(arguments.length == 2){
        return  (arguments[0]+arguments[1])*10;
    }
    return 10;
}
console.log(fun(11,111)); // 返回 1220  ！！！！

没有重载：

上面例子是模仿函数的重载，为什么要模仿呢，我自己创建几个不同参数的函数不久可以了。

function fun( num1) {
    return "只有一个参数的函数"
}
function fun( num1,num2) {

    return "有两个参数的函数";
}
console.log(fun(11)); // 输出 “有两个参数的函数”

明明调用的是带一个参数的函数，执行的确是带两个参数的函数。原因：js定义了两个相同名字的函数，该名字只属于后定义的函数！！！所以在 js 中没有重载这一特性。

函数名是指针：

var fun = function(num1,num2) {
    return num1+num2;
};

var new_fun = fun;
fun = null;  // 将 函数 置 null

console.log(new_fun(10,20)); //输出 ：30
console.log(fun(10,20)); //抛出异常 ：fun is not a function

可看出尽管 fun = null; 但在此之前 var new_fun = fun; 也就是指针也指向了 new_fun 了，所以 new_fun （）函数还能执行，并且函数体没有置 null

函数也可以作为值来使用：

function add(fun,num) {
    return fun(num);
}
function add_10(num) {
    return num+10;
}

console.log(add(add_10,200)); // 输出 : 210

可以这么解释：

function add(  函数   ,   参数   ) {

    return    函数 (   传递过来的参数  );
}

函数的 arguments.callee

这是一个递归的示例

function fun(num) {
    if(num<=1){
        console.log(num );
        return 1 ;
    }else {
        console.log(num );
        return num * arguments.callee(num-1);
    }
}
console.log(fun(3)); // 输出 6

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

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

JavaScript 原型中的哲学思想

摘要：而作为构造函数，需要有个属性用来作为以该构造函数创造的实例的继承。欢迎来我的博客阅读：「JavaScript 原型中的哲学思想」记得当年初试前端的时候，学习JavaScript过程中，原型问题一直让我疑惑许久，那时候捧着那本著名的红皮书，看到有关原型的讲解时，总是心存疑虑。当在JavaScript世界中走过不少旅程之后，再次萌发起研究这部分知识的欲望，翻阅了不少书籍和资料，才搞懂...

sugarmo 2019-08-19 18:38 评论0 收藏0
JavaScript中的面向对象（object-oriented）编程

摘要：对象在中，除了数字字符串布尔值这几个简单类型外，其他的都是对象。那么在函数对象中，这两个属性的有什么区别呢表示该函数对象的原型表示使用来执行该函数时这种函数一般成为构造函数，后面会讲解，新创建的对象的原型。这时的函数通常称为构造函数。。本文原发于我的个人博客，经多次修改后发到sf上。本文仍在不断修改中，最新版请访问个人博客。最近工作一直在用nodejs做开发，有了nodejs，...

JerryZou 2019-08-21 10:26 评论0 收藏0
[译] 为什么原型继承很重要

摘要：使用构造函数的原型继承相比使用原型的原型继承更加复杂，我们先看看使用原型的原型继承上面的代码很容易理解。相反的，使用构造函数的原型继承像下面这样当然，构造函数的方式更简单。五天之前我写了一个关于ES6标准中Class的文章。在里面我介绍了如何用现有的Javascript来模拟类并且介绍了ES6中类的用法，其实它只是一个语法糖。感谢Om Shakar以及Javascript Room中...

xiao7cn 2019-08-21 10:27 评论0 收藏0
JavaScript中的数据类型及其检测

摘要：中的数据类型及其检测数据类型基本类型引用类型类型检测只能检测基本数据类型，对于还有一个用于检测某个对象的原型链是否包含某个构造函数的属性适用于检测对象，它是基于原型链运作的属性返回一个指向创建了该对象原型的函数引用，该属性的值是哪个函数本身 JavaScript中的数据类型及其检测 1. 数据类型 1.1 基本类型 Number String Boolean Null Undefin...

Bryan 2019-08-22 10:36 评论0 收藏0
你是否理解js的Object与Function与原型链

摘要：原型对象是由创建的，因此原型对象的构造函数是构造函数也可以是称为对象，原型对象也就继承了其生父构造函数中的数据，也同时继承了原型对象的数据。当然这条原型链中的数据，会被还是还是这类构造函数继承，但是不会被这些继承，他们不处于同一个链条上。 js中，Function的本质是什么？Object的本质又是什么？js中有几条原型链？ showImg(https://segmentfault.c...

itvincent 2019-08-20 17:51 评论0 收藏0
前端面试题 -- JavaScript (一)

摘要：前言前两天总结了一下方面的面试题传送门，今天翻看了一些面试中常见的几个问题只是一部分，会持续更新，分享给有需要的小伙伴，欢迎关注如果文章中有出现纰漏错误之处，还请看到的小伙伴留言指正，先行谢过以下有哪些数据类型种原始数据类型布尔表示一个逻辑前言前两天总结了一下HTML+CSS方面的面试题 (传送门)，今天翻看了一些 JavaScript 面试中常见的几个问题（只是一部分，会持续更新...

junnplus 2019-08-23 15:59 评论0 收藏0