11/* The for principles of "this";
22* in your own words. explain the four principle for the "this" keyword below.
33*
4- * 1.
5- * 2.
6- * 3.
7- * 4.
4+ * 1. Window/GLobal Binding -
5+ * 2. Implicit Binding
6+ * 3. New Binding -
7+ * 4. Explicit Binding -
88*
99* write out a code example of each explanation above
1010*/
1111
12+ // 1) Window/GLobal Binding -
13+ // When "this" used in a global/window scope it will bind to global/window depending on your IDE.
14+ //
15+ // 2) Implicit Binding -
16+ // When you call a function and . and it gets invoked look to the left of the function and that is where "this" will bind to.
17+ //
18+ // 3) New Binding -
19+ // When using the new keyword to invoke an object "this" will bind to the instance of the object.
20+ //
21+ // 4) Explicit Binding -
22+ // When using explicit binding you will tell "this" how it should behave with the functions call. .bind or .apply.
23+
1224// Principle 1
1325
1426// code example for Window Binding
27+ function sayName ( name ) {
28+ console . log ( this ) ;
29+ return name ;
30+ }
31+
32+ sayName ( 'Sascha' ) ;
1533
1634// Principle 2
1735
1836// code example for Implicit Binding
37+ const animal = {
38+ noise : 'bark' ,
39+ age : 5 ,
40+ sayHello : function ( name ) {
41+ console . log ( `${ this . noise } ${ name } ) ;
42+ console . log ( this ) ;
43+ }
44+ } ;
45+
46+ //the function got invoked to this refers to the thing left from the . notation which is here the animal object
47+ animal . sayHello ( 'Doggo' ) ;
48+
1949
2050// Principle 3
2151
2252// code example for New Binding
2353
54+ let Icecream = function ( color , taste , name ) {
55+ // this = {}
56+ this . color = color ;
57+ this . taste = taste ;
58+ this . name = name ;
59+ }
60+
61+ // When an object is invoked with the new Keyword the this will be bound to the instance of the object.
62+ let raspberryIceCream = new Icecream ( "red" , "raspberry" , "sour" ) ;
63+
64+
65+ /* other version */
66+ /* function Person(greeter) {
67+ this.greeting = 'Hello';
68+ this.greeter = greeter;
69+ this.speak = function() {
70+ console.log(this.greeting + " " + this.greeter);
71+ console.log(this);
72+ };
73+ }
74+
75+ const jerry = new Person('jerry');
76+ const sascha = new Person('sascha');
77+
78+ jerry.speak();
79+ sascha.speak(); */
80+
81+
2482// Principle 4
2583
26- // code example for Explicit Binding
84+ // code example for Explicit Binding
85+
86+ let changeColor = function ( state1 , state2 , state3 ) {
87+ console . log ( 'My color is ' + this . color + ' and I am currently ' + state1 + " and want to " + state2 + " so I will end up as " + state3 + "." ) ;
88+ } ;
89+
90+ let cube = {
91+ name : 'icecube' ,
92+ color : 'blue'
93+ } ;
94+
95+ let state = [ "solid" , "melt" , "water" ]
96+
97+ // .call, .apply and .bind will tell explictly how the this should behave
98+ // .call and .apply work kinda the same by immediately invoking the function
99+ // .bind ist like .call but returns a new function
100+
101+ // .call have the arguments inserted one by one
102+ changeColor . call ( cube , state [ 0 ] , state [ 1 ] , state [ 2 ] ) ;
103+ // .apply uses an array for inserting arguments
104+ changeColor . apply ( cube , state ) ;
105+ // this also works with the spread operator to insert the whole array as an argument
106+ changeColor . call ( cube , ...state ) ;
107+ // .bin will return a new function instead of invoking the original function. It will bind this to the cube object, insert the arguments and return the newFunction.
108+ let newFunction = changeColor . bind ( cube , state [ 0 ] , state [ 1 ] , state [ 2 ] ) ;
109+ console . log ( newFunction ( ) ) ;
110+
111+
112+ /* other versions */
113+
114+ /* function Person(greeter) {
115+ this.greeting = 'Hello';
116+ this.greeter = greeter;
117+ this.speak = function() {
118+ console.log(this.greeting + " " + this.greeter);
119+ console.log(this);
120+ };
121+ }
122+
123+
124+ const kevin = new Person('jerry ');
125+ const elan = new Person('sascha');
126+
127+ jerry.speak.call(sascha);
128+ sascha.speak.apply(jerry);
129+
130+ sascha.speak();
131+ jerry.speak();
132+
133+
134+
135+ function hello() {
136+ console.log(this)
137+ } */
138+
139+ /*
140+ function sayHello(name) {
141+ console.log('this', this);
142+ console.log(`${this.greeting} my name is ${name}`);
143+ console.log(this);
144+ }
145+
146+ const myObj = {
147+ 'greeting': 'Hello',
148+ 'sayHello': sayHello
149+ };
150+ const travelingMe = {
151+ greeting: 'Hola',
152+ };
153+
154+ const testHello = myObj.sayHello
155+
156+ sayHello.call(travelingMe, 'Rosie')
157+ sayHello.call({
158+ greeting: 'Meow'}, 'Rosie')
159+
160+ const boundHello = sayHello.bind({greeting: 'Mau'}, 'Kittie')
161+
162+ boundHello() */
0 commit comments