zoukankan      html  css  js  c++  java
  • C++程序员的javascript教程

    本文主要目的是向c++程序员阐述javascript的编程思想,以及编程中的误区。

     

    变量声明:

    1、变量声明的解析早于代码运行。JavaScript引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行(This behaviour is called "hoisting", as it appears that the variable declaration is moved to the top of the function or global code.)

    2、给一个未声明的变量赋值等于创建一个全局变量

    具体参见:

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

    http://www.nowamagic.net/librarys/veda/detail/1623

     

    变量没有块作用域,只有函数作用域:

    1、当初为了实现简单,只有function scope and not block scope,所以{}对变量作用域没起作用

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Statements?redirectlocale=en-US&redirectslug=JavaScript%2FGuide%2FStatements#Block_Statement

    http://stackoverflow.com/questions/17311693/why-does-javascript-not-have-block-scope

    var x = 1;
    {
      var x = 2;
    }
    alert(x); // outputs 2

     

    布尔条件判断:

    除了以下值是假的,其他都是真的

    • false
    • undefined
    • null
    • 0
    • NaN
    • the empty string ("")

    例如,下面这个是假的:

    var b = new Boolean(false);
    if (b) // this condition evaluates to true

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Statements?redirectlocale=en-US&redirectslug=JavaScript%2FGuide%2FStatements#if...else_Statement

     

    闭包:

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

     

    一些特殊的函数:

    bind apply call

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Function/bind

     

     

     

    对象创建:

    混合的构造函数/原型方式

    联合使用构造函数和原型方式,就可像用其他程序设计语言一样创建对象。这种概念非常简单,即用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。结果是,所有函数都只创建一次,而每个对象都具有自己的对象属性实例。

    我们重写了前面的例子,代码如下:

    function Car(sColor,iDoors,iMpg) {
      this.color = sColor;
      this.doors = iDoors;
      this.mpg = iMpg;
      this.drivers = new Array("Mike","John");
    }
    
    Car.prototype.showColor = function() {
      alert(this.color);
    };
    
    var oCar1 = new Car("red",4,23);
    var oCar2 = new Car("blue",3,25);
    
    oCar1.drivers.push("Bill");
    
    alert(oCar1.drivers);	//输出 "Mike,John,Bill"
    alert(oCar2.drivers);	//输出 "Mike,John"
     
     
    继承:
    参考:http://www.w3school.com.cn/js/pro_js_inheritance_implementing.asp
    由于 对象冒充 这种继承方法的流行,ECMAScript 的第三版为 Function 对象加入了两个方法,即 call() 和 apply()

     

     

    嵌套函数调用this问题(definitive guide 8.2.2)

    If a nested function is invoked as a function
    then its  thisvalue will be either the global object (non-strict mode) or undefined(strict
    mode). It is a common mistake to assume that a nested function invoked as a function
    can use  thisto obtain the invocation context of the outer function. If you want to access
    the thisvalue of the outer function, you need to store that value into a variable that is
    in scope for the inner function. It is common to use the variable selffor this purpose.
    For example:

    var o = { // An object o.
    m: function() { // Method m of the object.
    var self = this; // Save the this value in a variable.
    console.log(this === o); // Prints "true": this is the object o.
    f(); // Now call the helper function f().
    function f() { // A nested function f
    console.log(this === o); // "false": this is global or undefined
    console.log(self === o); // "true": self is the outer this value.
    }
    }
    };

     

    对象作为实参,类似c的结构体参数,这样就不用记住参数顺序了。(definitive guide 8.3.3)

    // Copy length elements of the array from to the array to.
    // Begin copying with element from_start in the from array
    // and copy that element to to_start in the to array.
    // It is hard to remember the order of the arguments.
    function arraycopy(/* array */ from, /* index */ from_start,
    /* array */ to, /* index */ to_start,
    /* integer */ length)
    {
    // code goes here
    }
    // This version is a little less efficient, but you don't have to
    // remember the order of the arguments, and from_start and to_start
    // default to 0.
    function easycopy(args) {
    arraycopy(args.from,
    args.from_start || 0, // Note default value provided
    args.to,
    args.to_start || 0,
    args.length);
    }
    // Here is how you might invoke easycopy():
    var a = [1,2,3,4], b = [];
    easycopy({from: a, to: b, length: 4});

     

     

    需要明白 lexical scoping和dynamic scope区别:(definitive guide  8.6

    作用域是描述名称对应的实体。

    可以参考:

    http://en.wikipedia.org/wiki/Scope_(computer_science)

    Name resolution of properties of JavaScript objects is based on inheritance in the prototype tree – a path to the root in the tree is called a prototype chain– and is separate from name resolution of variables and functions.

    javascript的对象属性走的是prototype chain,和名称解析无关。

    http://www.zhihu.com/question/20032419

    词法作用域(lexical scope)等同于静态作用域(static scope)。所谓的词法作用域其实是指作用域在词法解析阶段既确定了,不会改变。
    我们要知道js是遵循静态作用域的。举个例子:
    var foo=1;
    function static(){
    alert(foo);
    }
    !function(){
    var foo=2;
    static();
    }();
    在js中,会弹出1而非2,因为static的scope在创建时,记录的foo是1。
    如果js是动态作用域,那么他应该弹出2。请体会一下两者的区别。
    另外,借@贺师俊的话,eval 和 with可以产生动态作用域的效果。

     

    9.2.1 Constructors and Class Identity
    As we’ve seen, the prototype object is fundamental to the identity of a class: two objects
    are instances of the same class if and only if they inherit from the same prototype object.
    The constructor function that initializes the state of a new object is not fundamental:
    two constructor functions may have prototypeproperties that point to the same prototype object. Then both constructors can be used to create instances of the same class.

    Even through constructors are not as fundamental as prototypes, the constructor serves
    as the public face of a class. Most obviously, the name of the constructor function is
    usually adopted as the name of the class. We say, for example, that the Range()constructor creates Range objects. More fundamentally, however, constructors are used
    with the instanceofoperator when testing objects for membership in a class. If we have
    an object rand want to know if it is a Range object, we can write:
    r instanceof Range // returns true if r inherits from Range.prototype
    The  instanceof operator  does  not  actually  check  whether  r was  initialized  by  the
    Rangeconstructor. It checks whether it inherits from  Range.prototype. Nevertheless,
    the  instanceofsyntax reinforces the use of constructors as the public identity of a class.
    We’ll see the instanceofoperator again later in this chapter

    9.2.2 The constructor Property
    In Example 9-2we set Range.prototypeto a new object that contained the methods for
    our class. Although it was convenient to express those methods as properties of a single
    object  literal,  it  was  not  actually  necessary  to  create  a  new  object.  Any  JavaScript
    functioncan be used as a constructor
    , and constructor invocations need a prototype
    property. Therefore, every JavaScript function (except functions returned by the ECMAScript 5 Function.bind()method) automatically has a prototypeproperty. The value of this property is an object that has a single nonenumerable constructorproperty.
    The value of the constructor property is the function object:
    var F = function() {}; // This is a function object.
    var p = F.prototype; // This is the prototype object associated with it.
    var c = p.constructor; // This is the function associated with the prototype.
    c === F // => true: F.prototype.constructor==F for any function

    The existence of this predefined prototype object with its constructorproperty means
    that objects typically inherit a  constructorproperty that refers to their constructor.
    Since constructors serve as the public identity of a class, this constructor property gives
    the class of an object:
    var o = new F(); // Create an object o of class F
    o.constructor === F // => true: the constructor property specifies the class

     

    image

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor

    9.3 Java-Style Classes in JavaScript

    这个很重要,对比一下java和javascript的类

  • 相关阅读:
    HasMap
    SQL Server 2005新特性之使用with关键字解决递归父子关系
    Silverlight4调用本地音频设备并将音频文件上传到服务器
    sql中exists,not exists的用法
    ie中jQuery无法解析xml文件的解决方案
    NeatUpload的安装使用
    C# 中 MSCHART 饼状图显示百分比
    JSON
    silverlight 独立存储
    SharePoint2010 自定义搜索
  • 原文地址:https://www.cnblogs.com/cute/p/3719332.html
Copyright © 2011-2022 走看看