深夜课堂:JavaScript引用类型(2)

5、Function类型(续)
函数的内部属性this:
栗子:

window.color = "red";
var o = { color: "blue" };
function sayColor(){
    alert(this.color);
}
sayColor();     //"red"
o.sayColor = sayColor;
o.sayColor();   //"blue"

再次强调:函数名仅仅是一个指针,上面两次调用函数的环境不同,但是全局的sayColor和o.sayColor()指向的其实是一个函数。

caller属性:

function outer(){
    inner();
}
function inner(){
    alert(inner.caller);//显示outer的代码。因为是outer调用了inner
} 
outer();

进化版本可以写成:

function outer(){
        inner();
    }
    function inner(){
        alert(arguments.callee.caller);
} outer();

这样就实现了和函数名更加松散的耦合。

函数的属性和方法:
length:函数希望接受的参数个数;
prototype:保存所有引用类型实例方法。
栗子:

function sayName(name){
    alert(name);
}
function sum(num1, num2){
    return num1 + num2;
}
function sayHi(){
    alert("hi");
}
alert(sayName.length);      //1
alert(sum.length);          //2
alert(sayHi.length);        //0

apply() call()函数:设置函数体内的this值。
栗子:

function sum(num1, num2){
    return num1 + num2;
}
function callSum1(num1, num2){
    return sum.apply(this, arguments);
}
function callSum2(num1, num2){
    return sum.apply(this, [num1, num2]);
}
alert(callSum1(10,10));   //20
alert(callSum2(10,10));   //20

传入的this值是window(因为是在全局环境下调用的)。
call和apply用法基本相同,只是call调用的时候,参数必须一一列举出来。
栗子:

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

这两个函数真正强大的地方是可以扩充函数赖以运行的作用域:

window.color = "red";
var o = { color: "blue" };
function sayColor(){
    alert(this.color);
}
sayColor();//red

sayColor.call(this);//red
sayColor.call(window);//red
sayColor.call(o);//blue

实现了对象和函数真正的松耦合,不必像第一个例子里写的那样,非要写上:o.sayColor = sayColor;
就可以直接输出blue字段。
还有一种写法也可以看到blue:

window.color = "red";
var o = { color: "blue" };
function sayColor(){
    alert(this.color);
}
var objectSayColor = sayColor.bind(o);
objectSayColor();    //blue

6、基本包装类型:
Boolean Number和String是3个基本包装类型。

引用类型和基本包装类型的主要区别是生存周期。使用new创建的对象,在执行流超出作用域之前一直存在于内存中,而基本包装类的对象,则只存在于一行代码执行的瞬间。这也就意味着我们不能在执行过程中为基本包装类型添加属性和方法。
(总之就是使用了new比较厉害的样子)
栗子:

var s1 = "some text";
s1.color = "red";
alert(s1.color);   //undefined

基本包装类型和object构造函数:

var obj = new Object("some text");
alert(obj instanceof String);   //true

使用new和不使用new的区别:

var value = "25";
var number = Number(value); //转型函数 
alert(typeof number); //"number"
var obj = new Number(value); //构造函数 
alert(typeof obj); //"object"

boolean:

var booleanObject = new Boolean(true);// 引用类型
var falseValue = false;// 基本类型

基本类型和引用类型布尔值的区别:

var falseObject = new Boolean(false);// 引用类型
var falseValue = false;// 基本类型

alert(typeoffalseObject); //object 
alert(typeof falseValue); //boolean 
alert(falseObject instanceof Boolean); //true 
alert(falseValue instanceof Boolean); //false

Number类型:

var numberObject = new Number(10);

toString方法:参数为转换为几进制
栗子:

var num = 10; 
alert(num.toString()); //"10" 
alert(num.toString(2)); //"1010" 
alert(num.toString(8)); //"12" 
alert(num.toString(10)); //"10" 
alert(num.toString(16)); //"a"

toFixed方法可以显示小数点后n位:

var num = 10;
alert(num.toFixed(2));     //"10.00"
var num = 10.005;
alert(num.toFixed(2));     //"10.01"

虾面~这个方法会返回指数表示格式:

var num = 10;
alert(num.toExponential(1)); //"1.0e+1"

然而这么小的数字似乎不必要用指数,虾面,这个函数可以判断数字最佳的表示方式,它接受的参数是数字的位数:

var num = 99;
alert(num.toPrecision(1)); 
//"1e+2" 鱿鱼用1位数无法表示99,因此被模糊为100了
alert(num.toPrecision(2)); //"99" 
alert(num.toPrecision(3)); //"99.0"

虾面,number基本类型和引用类型的区别:

var numberObject = new Number(10);
var numberValue = 10;
alert(typeof numberObject);   //"object"
alert(typeof numberValue);    //"number"
alert(numberObject instanceof Number);  //true
alert(numberValue instanceof Number);   //false

String类型:

var stringObject = new String("hello world");

var stringValue = "hello world";
alert(stringValue.length);     //"11"

string类型有好多方法可以用:
字符方法:

// 返回特定位置的字符
var stringValue = "hello world";
alert(stringValue.charAt(1));   //"e"
// 另一种方法
var stringValue = "hello world";
alert(stringValue[1]);   //"e"

var stringValue = "hello world";
alert(stringValue.charCodeAt(1)); //  "101" e的字符编码

字符串操作方法:

var stringValue = "hello ";
var result = stringValue.concat("world", "!");// 可接受多个参数
alert(result); //"hello world!" 
alert(stringValue); //"hello"

slice、substring、subset方法:

var stringValue = "hello world";
alert(stringValue.slice(3));;//"lo world"
alert(stringValue.substring(3));//"lo world"
alert(stringValue.substr(3));//"lo world"
alert(stringValue.slice(3, 7));//"lo w"
alert(stringValue.substring(3,7));//"lo w"
alert(stringValue.substr(3, 7))//"lo worl"

字符串的位置方法:

var stringValue = "hello world";
alert(stringValue.indexOf("o"));             //4
alert(stringValue.lastIndexOf("o"));         //7

// 接受两个参数:
var stringValue = "hello world";
// 从第六个开始向后搜索
alert(stringValue.indexOf("o", 6));         //7
// 从第六个开始向前搜索
alert(stringValue.lastIndexOf("o", 6));     //4

循环使用函数index,可以找到一个字符串内所有的被查找字符串的位置:

var stringValue = "Lorem ipsum dolor sit amet, consectetur adipisicing elit"; var positions = new Array();
var pos = stringValue.indexOf("e");
while(pos > -1){
    positions.push(pos);
    pos = stringValue.indexOf("e", pos + 1);
}
alert(positions);    //"3,24,32,35,52"

trim方法:删除前缀后缀所有空格:

var stringValue = "   hello world   ";
var trimmedStringValue = stringValue.trim();
alert(stringValue);            //"   hello world   "
alert(trimmedStringValue);     //"hello world"

注意,IE9以下不支持这个方法。(当前端工程师听说要适配IE7时的内心…简直是一万只奔腾的草泥马)

字符串大小写转化:

var stringValue = "hello world";
alert(stringValue.toLocaleUpperCase());  //"HELLO WORLD"
alert(stringValue.toUpperCase());        //"HELLO WORLD"
alert(stringValue.toLocaleLowerCase());  //"hello world"
alert(stringValue.toLowerCase());        //"hello world"

字符串模式匹配:match函数

var text = "cat, bat, sat, fat";
var pattern = /.at/;
//与pattern.exec(text)相同
var matches = text.match(pattern); 
alert(matches.index); //0 
alert(matches[0]); //"cat" 
alert(pattern.lastIndex); //0

另一个方法是search函数,它仅仅返回第一个匹配项的位置,如果查找不到,返回-1。

var text = "cat, bat, sat, fat";
var pos = text.search(/at/);
alert(pos);   //1

replace方法:

var text = "cat, bat, sat, fat";
var result = text.replace("at", "ond");
alert(result);    //"cond, bat, sat, fat"

result = text.replace(/at/g, "ond");// 设置了全局标志g
alert(result);    //"cond, bond, sond, fond"
var text = "cat, bat, sat, fat";
result = text.replace(/(.at)/g, "word ($1)");
alert(result);    //word (cat), word (bat), word (sat), word (fat)

split方法:

var colorText = "red,blue,green,yellow";
var colors1 = colorText.split(",");//["red", "blue", "green", "yellow"]
var colors2 = colorText.split(",", 2);//["red", "blue"]

localeCompare方法,用于比较两个字符串,字符串相等返回0。否则,若被比较的字符比较靠前,则返回1。栗子:

var stringValue = "yellow"; alert(stringValue.localeCompare("brick")); //1 alert(stringValue.localeCompare("yellow")); //0 alert(stringValue.localeCompare("zoo")); //-1

fromCharCode方法,它是String构造函数的静态方法。
将字符编码转化为字符串:

alert(String.fromCharCode(104, 101, 108, 108, 111)); //"hello"

7、单体内置对象:
开发人员不必显式的实例话内置对象,因为它们已经实例化过了。
包括:Global和Math对象。
Global:
uri编码方法:会对特殊字符进行编码。
encodeURI不会对本身属于URI的特殊字符编码,例如冒号,正斜杠等等,而encodeURIComponent则会对它发现的任何非标准字符编码。

var uri = "http://www.wrox.com/illegal value.htm#start";
//"http://www.wrox.com/illegal%20value.htm#start"
alert(encodeURI(uri));
//"http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start" alert(encodeURIComponent(uri));

var uri = "http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start";
//http%3A%2F%2Fwww.wrox.com%2Fillegal value.htm%23start
alert(decodeURI(uri));
//http://www.wrox.com/illegal value.htm#start
alert(decodeURIComponent(uri));

eval方法:很强大,它就相当于一个完整的ECMAScript解析器。

var msg = "hello world";
eval("alert(msg)");    //"hello world"


eval("function sayHi() { alert('hi'); }");
sayHi();

eval("var msg = 'hello world'; ");
alert(msg);     //"hello world"

window对象:在全局作用域里面的变量和函数,都看作了window的属性。

var color = "red";
function sayColor(){
    alert(window.color);
}
window.sayColor();  //"red"

Math对象:
实例方法:

var max = Math.max(3, 54, 32, 16);
alert(max);    //54
var min = Math.min(3, 54, 32, 16);
alert(min);    //3

var values = [1,2,3,4,5];
var max = Math.max.apply(Math, values);

alert(Math.ceil(25.9));     //26
alert(Math.ceil(25.5));     //26
alert(Math.ceil(25.1));     //26
alert(Math.round(25.9));    //26
alert(Math.round(25.5));    //26
alert(Math.round(25.1));    //25
alert(Math.floor(25.9));    //25
alert(Math.floor(25.5));    //25
alert(Math.floor(25.1));    //25

Math.random()// 大于等于零,小于1的随机数
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值