继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

函数和对象

慕UI4062818
关注TA
已关注
手记 348
粉丝 97
获赞 552

一、函数


JavaScript中的函数定义分为两种:声明式函数和赋值式函数。而且,函数的名称就是函数的内存地址,和变量一样,指向函数代码所在的内存区域。


// 声明式函数

function fn(name){

    var msg = "你好,"+name+",我是一个函数.";

    alert(msg);

}


// 赋值式函数

var fn = function(name){

    var msg = "你好,"+name+",我是一个函数.";

    alert(msg);

}


以上两种表达式中的fn是一样的,都是指向一个函数的指针。alert(fn)的运行结果都是:


wKiom1msq2LSmQqoAAAbXCncD1M659.png-wh_50


alert(fn)之所以能够打印函数的声明语句,是因为toString()方法:


function fn(){

    var msg = "你好,"+name+",我是一个函数.";

    alert(msg);

       

}

alert(fn.toString());


运行结果是一样的。


那么toString()方法是怎样来的呢?


对于JavaScript来说,函数其实是Function类的对象。比如,我们可以用Function类直接创建上面的fn函数:


var fn = new Function("name","var msg = \"你好,\"+name+\",我是一个函数.\";\nalert(msg);");

alert(fn);


执行结果如下:


wKioL1msq4eSZP-EAAAbKaOGWzw323.png-wh_50


函数的执行结果也是一样的:


var fn = new Function("name","var msg = \"你好,\"+name+\",我是一个函数.\";\nalert(msg);");

fn("张三");


wKiom1msq7iBwcu_AAAUFaKPmto861.png-wh_50


Function对象有length属性,可以查看函数的参数,有valueOf()方法和toString()方法,这两个方法返回的都是函数的源代码。因此,alert(fn)显示的就是函数的声明语句了。


既然函数名是指向函数的变量,那么就可以把函数作为参数传递给另一个函数。



function fn(name){

    var msg = "你好,"+name+",我是一个函数.";

    alert(msg);

}

function call_fn(func,name){

    func(name);

}

call_fn(fn,"张三");


wKioL1msq9PidgmqAAAUFaKPmto358.png-wh_50


JavaScript的函数,使用特殊对象arguments封装了函数的参数,我们无需明确指出参数名,就能访问它们。通过属性 arguments.length可以获得函数的参数个数 。用arguments对象判断传递给函数的参数个数,即可模拟函数重载。下面是官方的一个例子。


function doAdd() {

  if(arguments.length == 1) {

    alert(arguments[0] + 5);

  } else if(arguments.length == 2) {

    alert(arguments[0] + arguments[1]);

  }

}

doAdd(10);       //输出 "15"

doAdd(40, 20);    //输出 "60"


JavaScript函数中,变量的作用域,要特别注意的一点是:加var关键字的变量是函数内部的局部变量,函数执行完后,变量将销毁;但没有加var关键字的变量,将成为全局变量,函数外可以访问。


function fn(){

    var x = 10;

    y = 20;

    alert("函数内部访问x:"+x+"\n函数内部访问y:"+y);

}

fn();

alert("函数外部访问y:"+y);

alert("函数外部访问x:"+x);


wKiom1msrNqy4JBAAAAVStlR_YE999.png-wh_50  wKiom1msrR2DloumAAATqf0MxrE669.png-wh_50  wKiom1msrZ2yJNymAAAY2LreAcI252.png-wh_50      


二、对象


JavaScript没有类的概念,只有对象定义。对象是由 new 运算符加上要实例化的对象的名字创建的。其中,要实例化的对象其实就是函数。那么,函数是怎样变成对象的呢?


先看下面这段代码。


function myobj(){

  return this;

}

var f = myobj();

var o= new myobj();

alert(f);

alert(o);


我们发现,加了new运算符后,this才指向由myobj创建的对象。

wKiom1msrfDBDluUAAARy7U4EPA714.png-wh_50

而var f = myobj(),这就不是创建对象,其中的this不是指myobj创建的对象,而是代码当前上下文环境的当前对象,比如是window。

wKioL1msrfPCIVCnAAASLEUnfd0395.png-wh_50

也就是说,用new运算符调用函数就创建了对象。this代表实例化之后的对象,可以显示的return,但并不需要这么做。以下代码效果是一样的。


function myobj(){

}

var o = new myobj();

alert(o);

wKioL1msrhGTVwkUAAARpT3MR3M563.png-wh_50

JavaScript的Object对象与Java中的Object相似,JavaScript中的所有对象都由这个对象继承而来,Object对象中的所有属性和方法都会出现在其他对象中。


Object 对象具有下列属性:

  1. constructor:创建对象的函数(构造函数)的引用(指针)。

  2. Prototype:对该对象的对象原型的引用。对于所有的对象,它默认返回Object对象的一个实例。


还具有几个方法:

  1. hasOwnProperty(property) :判断对象是否有某个特定的属性。必须用字符串指定该属性。(例如,o.hasOwnProperty("name"))。

  2. isPrototypeOf(object) :判断该对象是否为另一个对象的原型。

  3. propertyIsEnumerable :判断给定的属性是否可以用 for...in 语句进行枚举。

  4. toString() :返回对象的原始字符串表示。对于 Object 对象,ECMA-262 没有定义这个值,所以不同的 ECMAScript 实现具有不同的值。

  5. valueOf() :返回最适合该对象的原始值。对于许多对象,该方法返回的值都与 ToString() 的返回值相同。


我们在浏览器的开发者工具的控制台输入new object()回车,可以查看上面那些Object对象的属性和方法。


wKioL1msri_ydrXRAAB7C8xobI0298.png-wh_50


Object对象也可以使用对象字面量语法来创建:var o = {};

同样,我们可以在浏览器的开发者工具中进行验证。

wKioL1msrobxEdAsAABwgmQ2I74458.png-wh_50


javascript支持后绑定,比如这样:

function obj()

{

}

var o = new obj();

o.fn = function(){

  alert("hello");

}

o.fn();


wKiom1mss5yDSa-4AAAQH82TWPY611.png-wh_50


所以,可以通过函数创建对象,这叫工厂方法:


function createCar(color,doors,mpg) {

  var car = new Object();

  car.color = color;

  car.doors = doors;

  car.mpg = mpg;

  car.showColor = function() {

    alert(this.color);

  };

  return car;

}

var car1 = createCar("red",4,23);

var car2 = createCar("blue",3,25);

car1.showColor();

car2.showColor();

     


  wKioL1msr8GDEIDDAAAP_ymWBU0296.png-wh_50  wKiom1mss7Swv0oUAAAQGsKqv4c881.png-wh_50



比较正规一点的创建对象的方法,用构造函数法,用this代表当前对象了:


function Car(color,doors,mpg) {

  this.color = color;

  this.doors = doors;

  this.mpg = mpg;

  this.showColor = function() {

    alert(this.color);

  };

}

var car1 = new Car("red",4,23);

var car2 = new Car("blue",3,25);

car1.showColor();

car2.showColor();

 

 

  wKioL1mssK7yOr6DAAAQGsKqv4c428.png-wh_50 wKioL1mssWeg5EQDAAAQGsKqv4c799.png-wh_50



构造函数法的问题是,其中的对象方法,比如例子中的showColor方法,每次new的时候都会创建一次,显然浪费内存。


可以用原型链定义对象的方法。这样,所有对象共享一个对象方法,既保证了对象属性的唯一性,也节约了内存:


function Car(color,doors,mpg) {

    this.color = color;

    this.doors = doors;

    this.mpg = mpg;

    this.drivers = new Array("Mike","John");

}

Car.prototype.showDrivers = function() {

  alert(this.drivers);

};

var car1 = new Car("red",4,23);

var car2 = new Car("blue",3,25);

car1.drivers.push("Bill");

car1.showDrivers();        //输出 "Mike,John,Bill"

car2.showDrivers();        //输出 "Mike,John"


  wKioL1msscPT6razAAARQ-UiY9g025.png-wh_50  wKioL1mstEDzGCmVAAARcxELLxg794.png-wh_50



对象方法,只能是new之后的对象可以访问:


function obj(){

}

obj.prototype.fn = function(){

    alert("hello");

}

var o = new obj();

o.fn();


wKioL1mstGmRQkzcAAAQH82TWPY005.png-wh_50


但是,如果这样访问obj.fn()就会报错:

function obj(){

}

obj.prototype.fn = function(){

    alert("hello");

}

obj.fn();


 wKiom1mstLnBq4uQAAAaZEaHa1E290.png-wh_50


用函数名字直接访问的方法,我们叫函数方法,或者静态方法。


function obj(){

}

obj.fn = function(){

    alert("hello");

}

obj.fn();


wKioL1mstMKzD6ZgAAAQH82TWPY061.png-wh_50


但javascript的静态方法,对象并不能访问,如果这样就会报错:


function obj(){

}

obj.fn = function(){

    alert("hello");

}

var o = new obj();

o.fn();


wKiom1mstSDjp2AsAAAabDTKJ1Y156.png-wh_50


还有很重要的一点,原型属性是所有对象共享,如果属性是引用类型,那么就会出现,一个对象修改了数值,其他对象相应的属性数值都会改变的尴尬局面。


function obj(){

}

obj.prototype.names = ["张三","李四"];

var o1 = new obj();

var o2 = new obj();

o1.names.push("o1添加的新的名字");

alert("o1.names:"+o1.names+"\no2.names:"+o2.names);


wKioL1mstWDCYWvkAAAZ7tOG5Ok030.png-wh_50


其实,javascript并没有真正的静态方法,只是利用javascript灵活的特性模拟实现的。


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP