javascript fundamental concept

function: function本身是一个object,它可以被赋值给任何变量

immediate invoked function expression(IIFE):  function(){}()

method vs function: 一个method是一个对象的一个函数属性(a method is a function that is a property of an object)例如:

var console={

  log:function(){}

}

console.log(“log是console的method!");

String methods:

下面的方法或者属性是string对象定义的方法或者属性!

length: 这个length实际上是一个属性,而不是一个方法。

indexOf

var line = "HAL: I‘m sorry, Dave. I‘m afraid I can‘t do ?
that";
alert( line.indexOf("I‘m") ); // 5
alert( line.indexOf("I‘m", 6) ); // 22

slice,substr,substring函数:

var greeting = "Hello, Andrew, what‘s up?",
name = greeting.slice(7, 13);
alert(name); // Andrew

split:该函数将一个字符串使用空格符作为分割依据将每个单词分开放到一个数组中

var arr = "apples oranges peaches bananas".split(" ");
console.log(arr); // ["apples", "oranges", "peaches", ?
"bananas"]

toLowerCase, toUpperCase

Date Methods

Date object有很多实用的方法可供使用

getDate,getDay,getFullYear,getHours,getMilliseconds,getMinutes,getMonth,getSeconds,getTime,getTimezoneOffset

setDate,setFullYear,setMinute,setMonth,setSeconds,setTime,setMilliseconds,setHours,

parse:可以用于讲一个字符串解析为Date object

alert( Date.parse("June 18, 1970") ); // 14529600000
alert( Date.parse("2010/11/11") ); // 1289451600000
var d = new Date(Date.parse("1995/04/25")); // Tue Apr 25 ?
1995 00:00:00 GMT-0400 (EST)
alert(d);

Array methods

join:这是和split相反的动作,它将把数组中的所有元素结合在一起形成一个string

alert( ["cats", "dogs", "hamsters", "fish"].join(‘ ‘) );
// "cats dogs hamsters fish"
alert( "this should not have spaces".split(" ").join("_") );
// "this_should_not_have_spaces"

pop/shift:

var arr = ["cats", "dogs", "hamsters", "fish"];
console.log( arr.pop() ); // "fish"
console.log( arr.shift() ); // "cats"
console.log( arr ); // ["dogs", "hamsters"]

push/unshift:push将在数组的尾部增加一个item,unshift则在数组的开始增加一个item

var arr = ["Beta", "Gamma"];
arr.push("Delta");
console.log(arr); // ["Beta", "Gamma", "Delta"];
arr.unshift("Alpha");
console.log(arr); // ["Alpha", "Beta", "Gamma", "Delta"]

reverse:

alert( ["Crockford", "Resig", "Zakas"].reverse() ); ?
// "Zakas, Resig, Crockford"

slice:有时,你希望将你的数组slice成多个部分,这个slice就提供这个功能。包含两个参数:index of the starting element and index of the element after the last one you want to slice.

alert( ["a", "b", "c", "d", "e"].slice(2, 4) ); ?
// ["c", "d"]
alert( ["f", "g", "h", "i", "j"].slice(1) ); ?
// ["g", "h", "i", "j"]

sort:按照字母排序:

["d", "e", "c", "a", "b"].sort(); // ["a", "b", "c", "d", ?
"e"]
[0, 5, 10, 15, 20, 25].sort();//[0, 10, 15, 20, 25, 5].

在上面对数字的排序可能并不是你希望得到的效果,一个可行的方案是sort函数传入一个函数:

var arr = [5, 2, 3, 4, 1,10,20];
arr.sort(function (a, b) {
return a - b;
});
console.log(arr); // [1, 2, 3, 4, 5 ,10 ,20];

Math functions

javascript也提供了一个Math 对象,你虽然不能像Date对象一样二次创建对象,但是你却可以直接调用Math对象的方法

min,max,random,round,ceil,floor,pow,

alert( Math.min(9, 1, 4, 2) ); // 1
alert( Math.random() ); // 0.5938208589795977 (you‘ll ?
probably get something else)
alert( Math.random() * 10 ); // 6.4271276677027345 (again,?
your mileage may vary)
alert( Math.round(10.4) ); // 10
alert( Math.round(10.5) ); // 11
alert( Math.ceil(10.4) ); // 11
alert( Math.floor(10.5) ); // 10
function getRandomNumberInRange(min, max) {
return Math.floor( Math.random() * (max - min + 1) + ?
min);
}
alert( getRandomNumberInRange(0, 100) ); // 39; you‘ll ?
probably get something different.

This

This是javascript预留的keyword,你可以将this想象成一个你不能控制的动态变量。this变量的值将随着你在代码的哪一个地方而不断变化其值:

默认情况下,this将指向window这个global对象。this没有一个合适的名字,但是他却有一个属性指向它自己:window.如果你看看下面这个小的代码,就有些感觉了:

var my_variable = "value";
function my_function () { return "another_value" }
alert( this.my_variable ); // "value"
alert( this.my_function() ); // "another_value"
var global = {
window : global
. . .
};
this = global;

这意味着你可以访问你的全局变量或者函数作为window的属性,而这比用this来访问这些全局变量函数更加普遍。这依然有点搞,因为你可以访问window对象来使用global对象上的函数或属性,即使this可以指向其他的对象。甚至,你不用使用window.xx的方式调用,除非你有一个local的变量或者函数而覆盖了全局的函数或变量!

new keyword

第一种改变this指针的方法是使用new 关键字:

你可能知道了javascript对象是什么(属性和函数的封装)。将相关的功能封装到一个合适的object中并且通过合适的接口来访问是一个非常非常非常基础的OOP编程模式。Classes就像一个蓝图:他们不是实际的对象,但是他们描述了一旦通过该class创建一个object,那么这个object应该具备的函数和变量。javascript是面向对象的,但是它却不用class这个概念。想法,它使用prototypes这个概念。prototypes是一些实际的对象objects,我们可以使用这些对象objects作为鲜活的创建其他对象的蓝图”对象“。

在其他语言中,比如c++,使用一个构造函数来创建新的对象。而在javascript中,构造函数是普通的函数,如果在它前面添加一个new关键字则可以创建新的对象。

比如我们要创建truck对象,

function Truck(model) {
this.num_of_tires = 4;
this.kilometers = 0;
this.model = model;
}
var my_truck = new Truck("Hercules");
console.log(my_truck);

上面的代码注意两点:首先,我们定义所有的变量作为this对象的属性;其次,我们没有从这个函数中返回任何东西。这两点是因为我们计划使用new关键字来调用这个函数创建对象。注意我们是如何使用new关键字的。它做了两件事:首先,它更改this指针指向一个新的干净的对象。很明显,我们然后可以增加我们定制的属性在这个函数中。第二件new干的事情是:它将this返回。现在my_truck变量将指向新的对象,这个my_truck就像我们下面的代码一样的结果:

var my_truck = {
num_of_tires : 4,
kilometers : 0,
model : "Hercules"
};
console.log(my_truck);

这就是使用new的想法:我们获得一个创建新对象的超级简单的方法。很明显,你如果仅仅需要一个或两个简单的对象,你不需要这么做。通常你在需要有很多功能并且希望打包到一个对象中时,你才需要这种new的模式,或者你希望创建一系列类似的对象时,也可以使用new方法来创建对象。

call and apply

第二种更改this指针的方法是call或者apply.在javascript中一切皆为对象---即便function也是对象。既然function是对象,那么他们也可以有属性和方法(property,method)。call和apply就是每一个function对象的两个默认方法。

这两个方法存在的价值就是在函数中修改this指针:

function Truck (model, num_of_tires) {
this.num_of_tires = num_of_tires;
this.kilometers = 0;
this.model = model;
}
var basic_vehicle = { year : 2011 };
Truck.call(basic_vehicle, "Speedio", 4);
console.log(basic_vehicle);

小知识点:primitive vs reference values:你可能想,虽然我们更改一个已知的对象,我们会丢失那些变更,除非我们将他们赋值给一个新的变量。如果变量是一个primitive value,那么这将是对的。然而,objects(arrays)是referrnce values:values passed by referrnce.一个primitive value(比如一个string或者number)是在计算机内存中保存的,而我们使用一个变量来访问它。当我们将这个变量传给一个函数时,我们会copy那个值到一个新的内存,而将函数参数指向这个新的copy内存,而在函数中对这个copy操作,因此原始的primitive value并不会被变更。(因为内存不同),但是当我们使用reference value时则不同:当我们传递一个object或者一个array给一个function时,形式参数将指向原始object/array相同的内存。这意味着,Truck.call(basic_vehicle)中的this和函数外的basic_object中的this是完全一个basic_object.所以没有必要做任何assign动作,因为basic_vehicle现在已经有了由Truck赋值的所有属性。如果我们将Truck.call(basic_vehicle)的返回值付给一个变量,将会发生什么,它将会是undefined,因为Truck without new将不会返回任何东西!

在这里,我们通过Truck函数的call方法来调用Truck函数。call的第一个参数是我们希望在函数中this所指向的对象。既然我们没有使用new来调用Truck,它将不会创建任何新的对象或者返回this.这也是我们所希望的,因为我们仅仅是在修改已经存在的对象,而不是重新创建一个!

在将成为this所指向的对象参数后(你可以称为函数的上下文context),我们可以传入任何需要的参数。这些将作为参数被传入将被执行的函数。上面的例子中,第二个参数"Speedio"将被传给Truck函数作为其第一个Parameter。第三个参数6将成为Truck的第二个参数。

和call向对应,还有一种方法叫做apply.两者的区别是:apply只接受两个参数。第一个是context object,第二个是将被传入function的一个参数的数组。如果你有一个作为数组的参数,这种方法将非常有用。例如,

function Truck (model, num_of_tires) {
this.num_of_tires = num_of_tires;
this.kilometers = 0;
this.model = model;
}
var basic_vehicle = { year : 2011 },
user_input = "Speedio 18";
Truck.apply(basic_vehicle, user_input.split(" "));
console.log(basic_vehicle);

Inside an Object

还有另外一种方法可以更改this的值。

var waitress = {
name : "Ashley",
greet: function (customer) {
customer = customer || " there!";
return "Hi " + customer + " My name is " + ?
this.name + "; what can I get you?";
}
};
alert( waitress.greet("Joe") ); // Hi Joe My name is ?
Ashley; what can I get you?
时间: 2024-11-04 00:32:44

javascript fundamental concept的相关文章

DCC Software and Graphics System

After working with DCC software for so many years, I saw the realtime solution went forward so much, also more and more low-level. As the game engine, 10 hears ago the game engine was such a challenge that now everything become so cheap, everybody co

驱动思想之机制和策略

驱动程序的角色 作为一个程序员, 你能够对你的驱动作出你自己的选择, 并且在所需的编程时间和结果的灵活性之间, 选择一个可接受的平衡. 尽管说一个驱动是"灵活"的, 听起来有些奇怪, 但是我们喜欢这个字眼, 因为它强调了一个驱动程序的角色是提供机制, 而不是策略. 机制和策略的区分是其中一个在 Unix 设计背后的最好观念. 大部分的编程问题其实可以划分为两部分:" 提供什么能力"(机制) 和 "如何使用这些能力"(策略). 如果这两方面由程序的

自己动手做一个数据库-英文版

Readings in Databases A list of papers essential to understanding databases and building new data systems. The list is curated and maintained by Reynold Xin (@rxin). If you think a paper should be part of this list, please submit a pull request. It m

python高性能web框架——Japronto

近期做了一个简单的demo需求,搭建一个http server,支持简单的qa查询.库中有10000个qa对,需要支持每秒10000次以上的查询请求. 需求比较简单,主要难点就是10000+的RPS.首先使用python + uwsgi写了个简单的demo,压测后发现,RPS只有几千,达不到性能要求.后来部署了多个服务,使用nginx做负载均衡才勉强达到需求. Japronto 后来经过google 搜索,发现了Japronto,github地址https://github.com/squeak

理解callback function in javascript

以下内容主要摘自[1,2] (1)In javascript, functions are first-class objects, which means functions can be used in a first-class manner like objects, since they are in fact objects themselves: They can be “stored in variables, passed as arguments to functions,

JavaScript Application Architecture On The Road To 2015

JavaScript Application Architecture On The Road To 2015 I once told someone I was an architect. It’s true in a way since I now have to design an intricate web of lies to back it up. On a serious note, I thought it might be salutary to look at the sta

Learning JavaScript Design Patterns -- A book by Addy Osmani

Learning JavaScript Design Patterns A book by Addy Osmani Volume 1.6.2 Tweet Copyright © Addy Osmani 2015. Learning JavaScript Design Patterns is released under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 unported license. It

傻瓜学习JavaScript闭包(译)

在<高级程序设计>中,对于闭包一直没有很好的解释,在stackoverflow上翻出了一篇很老的<JavaScript closure for dummies>(2016)~ 出处:http://stackoverflow.com/questions/111102/how-do-javascript-closures-work 闭包不是魔法 本文旨在用JavaScript代码让程序员理解闭包,函数式编程的程序员或者导师请绕行. 只要理解了闭包的核心理念,闭包并不难学.但是通过学习一

javascript闭包(Effective JavaScript读书笔记)

Effective JavaScript:编写高质量JavaScript代码的68个有效方法: Item 11:   Get Comfortable with Closures Closures may be an unfamiliar concept to programmers coming from languages that don’t support them. And they may seem intimidating at first. But rest assured tha