javascript - JavaSCript の例 (Oreilly book)

Question

メソッド(オブジェクトの関数)は、「this」キーワードを使用してオブジェクトの変数を参照できます。

関数のプロパティは関数変数を参照できますか?

例えば：-

   function foo()
    {
        var x=5;
    }
    foo.help = {o1:x};// o1 is not initialized to x.
//Using o1:this.x also doesn't help. Why? Explain please.

とにかくo1をxに初期化する方法はありますか?

例 9-1。シンプルな JavaScript クラス

// range.js: A class representing a range of values.
// This is a factory function that returns a new range object.
function range(from, to) {
// Use the inherit() function to create an object that inherits from the
// prototype object defined below. The prototype object is stored as
// a property of this function, and defines the shared methods (behavior)
// for all range objects.
var r = inherit(range.methods);
// Store the start and end points (state) of this new range object.
// These are noninherited properties that are unique to this object.
r.from = from;
r.to = to;
// Finally return the new object
return r;
}
// This prototype object defines methods inherited by all range objects.
range.methods = {
// Return true if x is in the range, false otherwise
// This method works for textual and Date ranges as well as numeric.
includes: function(x) { return this.from <= x && x <= this.to; },
// Invoke f once for each integer in the range.
// This method works only for numeric ranges.
foreach: function(f) {
for(var x = Math.ceil(this.from); x <= this.to; x++) f(x);
},
// Return a string representation of the range
toString: function() { return "(" + this.from + "..." + this.to + ")"; }
};
// Here are example uses of a range object.
var r = range(1,3); // Create a range object
r.includes(2); // => true: 2 is in the range
r.foreach(console.log); // Prints 1 2 3
console.log(r); // Prints (1...3)

私が理解していること: Range は変数 from と to を持つ関数です。Range.methods は Range のプロパティです。Range() の外で定義されていますが、from および to にアクセスできます ( this.from および this.to を使用)。どのように？ありがとうございました。

score 3 · Accepted Answer

編集

この回答は編集された質問に基づいています-元の回答は以下です

あなたの理解は少し後退しています。
機能はありませんし from、toあなたが思うように機能します。

これを別の方法で構築し、ほぼすべての機能を同じにして、JS を初めて使用する人が理解しやすいようにするには、次のように記述します。

// my `makeRange` function makes an object
// then it gives it all of the things a range object needs
// then it returns the new object
var makeRange = function (min, max) {
    // there are cleaner more-compact ways of doing this
    // I'm writing this out in long-form to show you exactly what's going on
    var rangeObject = {};
    rangeObject.from = min;
    rangeObject.to = max;
    rangeObject.includes = includes;
    rangeObject.foreach  = foreach;
    rangeObject.toString = toString;

    return rangeObject;
};

// these are all of the functions inside of `range.methods`
// they don't have to be attached to the function ***AT ALL***, for ***ANY REASON***
// other than the author wanted them to be there for the sake of organization
// Here, I'm just putting them out on their own, for sake of clarity
var includes = function (x) { return this.from <= x && x <= this.to; },
    foreach  = function (func) {
        var min = this.from,
            max = this.to,
            i   = 0;

        for (i = min; i <= max; i += 1) { func(i); }
    },
    toString = function () { return "(" + this.from + "..." + this.to + ")"; };



var range_3_to_5  = makeRange(3,  5),
    range_6_to_12 = makeRange(6, 12);


range_3_to_5.from;         // 3
range_6_to_12.includes(8); // true
range_6_to_12.foreach(function (i) { console.log(i); }); // [logs:] 6,7,8,9,10,11,12

例のmethodsonrangeは関数の一部ではありません。それらは、オブジェクトが構築されるときにオブジェクトに与えられる
メソッドです。あなたが与えた例では、これは呼び出しの中で起こっていますが、そのコードブロックでは説明されていません。
r = inherit(range.methods);

はthis関数をまったく参照していません。メソッドが呼び出された時点で、メソッドを使用する最終的なオブジェクトを
参照します。

私のrange_3_to_5とrange_6_to_12は両方ともの同じコピーを使用していますincludes。
がrange_3_to_5.includes(6);呼び出されると、thisがに設定されrange_3_to_5、関数はthis.fromとthis.toを使用してが範囲内にあるかどうかを判断xします。

ここには複雑な魔法はありません。
工場の組み立てラインなど、特定の方法で何かを「作成」し、完成したバージョンを渡す関数を呼び出しているだけです。

アセンブリラインの各コピーに共有機能を追加し、それらの共有機能を使用thisして、その時点で処理しているコピーを特定します。

var car   = { license : "a32 vx98" },
    truck = { license : "vdx 2000" },
    jeep  = { license : "mkv 3a2b" };


var read_license = function () { console.log(this.license); };


car.read_license   = read_license;
truck.read_license = read_license;

car.read_license();   // [logs:] a32 vx98
truck.read_license(); // [logs:] vdx 2000

関数の.callor.applyメソッドを使用して手動でを設定して、関数を単独で呼び出すこともできthisます。

read_license.call(jeep); // [logs:] mkv 3a2b

または、.bindに対して常に同じ値を使用する関数のバージョンを保存するために使用しますthis。

var read_car_license = read_license.bind(car);

read_car_license();  // a32 vx98

下の以前の回答

リモートでもありません。

変数は、それらが作成された関数内に存在します。

var myFunction = function () {
    var myValue = 23;
    console.log(myValue);
};


myFunction(); // [log:] 23
console.log(myValue); // undefined

値は、さらに次の関数内に存在できます。

var myFunction = function () {
    var myValue = 23,

        sayValue = function () {
            console.log(myValue);
        };


    sayValue();  // will log 23 when you call `myFunction`
}



myFunction();  // [log:] 23

ただし、変数を関数の外側 (内側ではなく) に配置する場合は、値を何かに返すか、関数の内側から直接値を設定する必要があります。

var myOutsideValue = 42,

    myFunction = function () {
        var myValue = 23;
        myOutsideValue = myValue;
    };



console.log(myOutsideValue); // 42
myFunction();
console.log(myOutsideValue); // 23

それとも返品...

var myReturnedValue = 0,
    myFunction = function () {
        var myValue = 23;
        return myValue;
    };

myReturnedValue = myFunction();
console.log(myReturnedValue); // [log:] 23

または、配列またはオブジェクトを渡して変更することもできます。

var myObject = {},

    myFunction = function (obj) {
        var myValue = 23;
        obj.value = myValue;
    };


myFunction(myObject);
console.log(myObject.value);  // [log:] 23

関数は自分自身を参照できます。
また、JavaScript では関数はオブジェクトなので (独自のプロパティとメソッドを持つことができます)、任意の{}オブジェクトにプロパティを追加するのと同じ方法で関数に追加できます。

var myFunc = function () {
    var myValue = 23;
    myFunc.properties = {};
    myFunc.properties.value = myValue;
};


myFunc();
console.log(myFunc.properties.value); // [logs:] 23

これはとは何の関係もありませんthis。

this探しているものの反対に使用されます。
これは、オブジェクトにアタッチされた関数の内部にいて、他のプロパティを読み取ったり、そのオブジェクトにある他のメソッドを実行したりする場合に使用します。

var myObject = {
    x : 23,
    y : 42,
    sayX : function () { console.log(this.x); },
    sayY : function () { console.log(this.y); }
};


myObject.sayX(); // [logs:] 23

this他のいくつかの場所で使用されますが、実際にはそれが主な役割です: 関数がアタッチされているオブジェクトの値/メソッドにアクセスまたは設定する (ドットプロパティアクセスまたは/ /obj.func()を使用した手動設定による)。もう 1 つの非常に一般的な状況は、キーワードを使用して新しいオブジェクトを作成することです。.call.apply.bindnew

したがって、機能させる方法xは、を理解することthisではなく、関数自体内で設定するか、より適切には、外部の別の変数に渡しx( return x)、値を自分で設定することです。

var foo = function () {
    var x = "x";
    return x;
},


variable;  // === undefined

foo.help = { o1 : 0 };

variable = foo(); // variable === "x"
foo.help.o1 = variable;


// or shorter:  foo.help.o1 = foo();

別：

var help = { o1 : 0 },

    foo = function (obj) {
        var x = "x";
        obj.o1 = x;
    };



foo(help);
foo.help = help;

this関数内でのみ機能します

var obj = {};

obj.x = 12;
obj.y = this.x + 5;  // DOESN'T WORK

this最後の例で動作する場合、それは FUNCTIONではなくthisFUNCTION'S を参照する関数の内部から使用しているためです。また、オブジェクト (またはまたは) に関連付けられていない関数を呼び出している場合は、を指します。thisobjobj.func();func.call(obj)new_func = func.bind(obj);thiswindow

score 0 · Accepted Answer

コンテキストでは、関数スコープ内にあるfoo.help = {o1: x}の定義と同じレキシカルスコープ内にありません。これは(オブジェクトスコープに適用される) にも適用されます。xfoothis.x

function foo() {
    var x = 5;
    this.help = x;
}

javascript - JavaSCript の例 (Oreilly book)

2 に答える 2

編集

Related

Reference