네가 모르는 자바스크립트:this와 대상 원형

this는 호출할 때 귀속됩니다. 함수의 호출 위치에 달려 있습니다.바인딩 규칙

기본 귀속(독립 함수 호출, 전역 대상에 귀속되지만 엄격한 모드에서this는undefined에 귀속됨)

function foo() {
    console.log(this.a);
}
var a = 2;
foo(); // 2

스텔스 귀속: 함수가 상하문 대상을 인용할 때this는 이 상하문 대상에 귀속되고 마지막 호출 위치가 작용한다

function foo() {
    console.log(this.a);
}
var obj = {
    a: 2,
    foo: foo
}
var a = "hello";
obj.foo(); // 2

암시적 분실

function foo() {
    console.log(this.a);
}
var obj = {
    a: 2,
    foo: foo
}
var bar = obj.foo; // foo ， 
var a = "hello world";
bar(); // hello world

귀속,call,apply 표시, 첫 번째 파라미터는 대상, 함수 호출 시this를 이 대상에 하드 귀속

function foo() {
    console.log(this.a);
}
var obj = {
    a: 2
}
var bar = function() {
    foo.call(obj);
}
bar(); // 2
setTimeout(bar, 1000); // 2
var a = "hello world";
bar.call(window); // 2

new 귀속: new로 함수를 호출할 때 새 대상을 만들고 이 새 대상을 함수 호출의this에 귀속시킵니다.

function foo(a) {
    this.a = a;
}
var bar = new foo(2); // bar foo this 
console.log(bar.a); //2

바인딩 규칙 우선 순위

스텔스 귀속보다 귀속이 높음

function foo() {
    console.log(this.a);
}
var obj1 = {
    a: 2,
    foo: foo
}
var obj2 = {
    a: 3,
    foo: foo
}
obj1.foo();//2
obj2.foo();//3
obj1.foo.call(obj2);//3, foo this obj2， obj1 
obj2.foo.call(obj1);//2

new 귀속이 스텔스 귀속보다 높음

function foo(something) {
    this.a = something;
}
var obj1 = {
    foo:foo
};
var obj2 = {};
obj1.foo(2);
console.log(obj1.a); //2
obj1.foo.call(obj2,3);
console.log(obj2.a); //3
var bar = new obj1.foo(4);
console.log(bar.a);//4
console.log(obj1.a);//2

new 귀속이 하드 귀속보다 높음(new와call 또는 apply는 동시에 사용할 수 없음)

function foo(something) {
    this.a = something;
}
var obj1 = {};
var bar = foo.bind(obj1);
bar(2);
console.log(obj1.a); //2
var baz = new bar(3);
console.log(obj1.a); //2
console.log(baz.a);//3

new에서 하드 연결을 사용하면 일부 파라미터를 미리 설정할 수 있습니다. new를 초기화할 때 다른 파라미터, 코리화의 일종만 전송할 수 있습니다.

function foo(p1, p2) {
    this.val = p1 + p2;
}
var bar = foo.bind(null, "p1"); // ，this new 
var baz = new bar("p2");
console.log(baz.val);//p1p2

귀속 예외는null 또는undefined를call,apply,bind 등에 전송하고this를 무시합니다

function foo() {
    console.log(this.a);
}
var a = 2;
foo.call(null);//2, 

간접 인용

function foo() {
    console.log(this.a);
}
var a = 2;
var o = {a:3, foo:foo};
var p = {a:4};
o.foo();//3
(p.foo = o.foo)();//2, ， 

소프트 바인딩

function foo() {
    console.log("name: " + this.name);
}
var obj = {name:obj},
    obj2 = {name:obj2},
    obj3 = {name:obj2};
var fooOBJ = foo.softBind(obj);
fooOBJ(); //name:obj
obj2.foo = foo.softBind(obj);
obj2.foo();//name:obj2
fooOBJ.call(obj3);//name:obj3
setTimeout(obj2.foo, 10);//name:obj

화살표 함수: 외부 작용역에 따라this를 결정하며 화살표 함수의 귀속은 수정할 수 없습니다

function foo() {
    return (a) => {
        //this foo()
        console.log(this.a);
    }
}
var obj1 = {a:2};
var obj2 = {a:3};
var bar = foo.call(obj1);
bar.call(obj2);//2

수조, 디지털 클래스 속성 추가, 수조 길이 증가

var myArray = ["foo", 42, "bar"];
myArray.baz = "baz";
console.log(myArray.length);
myArray["3"] = "baz";
console.log(myArray.length);

속성 설명자: writable, 속성의 값을 수정할 수 있는지 여부.configurable, 속성 설명자를 수정할 수 있는지 여부,false라면 이 속성을 삭제하는 것을 금지합니다.Enumerable, Getter/setter 열거 가능

var myObject = {
    get a() {
        return this._a_;
    },
    set a(val) {
        this._a_ = val * 2; 
    }
};
myObject.a = 2;
console.log(myObject.a);

속성의 존재성, 값이undefined이거나 존재하지 않음을 되돌려줍니다

undefined
var myObject = {
    a:2
};
"a" in myObject; // true,  
"b" in myObject; //false
myObject.hasOwnProperty("a");//true， 
myObject.hasOwnProperty("b");//false

섞여 들어가다
1. 디스플레이 믹스

function mixin(sourceObj, targetObj) {
    for(var key in sourceObj) {
        if(!(key in targetObj)) {
            targetObj[key] = sourceObj[key];
        }
    }
    return targetObj;
}

var Vehicle = {
    engine: 1,
    ignition: function() {
        console.log("turning on my engine.");
    },
    drive: function() {
        this.ignition();
        console.log("steering and moving forward!");
    }
};

var Car = mixin(Vehicle, {
    wheels: 4,
    drive: function() {
        Vehicle.drive.call(this);
        console.log("rolling on all" + this.wheels + "wheels!");
    }
});

2, 혼합 혼입 을 먼저 복제 후 특수화 를 효율 이 낮 아 자주 쓰 지 않 았 다

function mixin(sourceObj, targetObj) {
    for(var key in sourceObj) {
        targetObj[key] = sourceObj[key];
    }
    return targetObj;
}

var Vehicle = { 
    //...
};

var Car = mixin(Vehicle, {});
mixin({
    wheels: 4,
    drive:function(){
        //...
    }
}, car);

3. 기생 상속

function Vehicle() {
    this.engine = 1;
}
Vehicle.prototype.ignition = function() {
    console.log("turning on my engine.");
};
Vehicle.prototype.drive = function() {
    this.ignition();
    console.log("steering and move forward!");
};
function Car() {
    var car = new Vehicle();
    car.wheels = 4;
    var vehDrive = car.drive;
    car.drive = function() {
        vehDrive.call(this);
        console.log("rolling on all" + this.wheels + "wheels!");
    }
    return car;
}
var mycar = new Car();
mycar.drive();

4. 스텔스 혼입

var Something = {
    cool: function() {
        this.greetng = "hello world";
        this.count = this.count ? this.count + 1 : 1;
    }
};

Something.cool();
Something.greetng; // hello world
Something.count; // 1

var Another = {
    cool: function() {
        Something.cool.call(this);
    }
};
Another.cool();
Another.greetng; //hello world
Another.count; // 1, count  

암시적 차폐

var anotherObject = {
    a: 2
};
var myObject = Object.create(anotherObject);
anotherObject.a; // 2
myObject.a; //2
anotherObject.hasOwnProperty("a"); //true
myObject.hasOwnProperty("a"); //false
myObject.a++; // 
anotherObject.a; //2
myObject.a;//3
myObject.hasOwnProperty("a");//true

구조 함수 || 호출

function nosp() {
    console.log("don't mind me!");
}
var a = new nosp(); //don't mind me!
a; // {} 

위탁 모드

Task = {
    setID: function(ID) {this.id = ID;},
    outputID: function() {console.log(this.id);}
};

// XYZ Task
XYZ = Object.create(Task);

XYZ.prepareTask = function(ID, Lable) {
    this.setID(ID);
    this.Lable = Lable;
};

XYZ.outputTaskDetails = function() {
    this.outputID();
    console.log(this.Lable);
};

시간이 좀 급해서 이 편은 격식상의 문제가 있을 수 있으니 나중에 다시 봅시다.