Skip to content

Instantly share code, notes, and snippets.

@coltonbh

coltonbh/index.html

Created March 14, 2017 21:10
Show Gist options
  • Save coltonbh/dfe2b4789d27141c167e2fb2034ed5b5 to your computer and use it in GitHub Desktop.
Save coltonbh/dfe2b4789d27141c167e2fb2034ed5b5 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/vuqovi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
/*
- Implicit Binding
- Explicit Binding
- new Binding
- window Binding
*/
// Implicit Binding (like self in Python)
// Left of the Dot (.) at Call Time
/* this references whatever is to the left
of the dot */
var sayNameMixin = function(obj) {
obj.sayName = function() {
console.log(this.name);
};
};
var me = {
name: 'colton',
age: 30
}
var you = {
name: 'michelle',
age: 31
}
//sayNameMixin(me);
//me.sayName();
// Explicit Binding
// call, apply, bind
/*
var sayName = function (lang1, lang2, lang3) {
console.log('My name is ' + this.name + ' and I know ' + lang1 + ', ' + lang2 + ', and ' + lang3);
};
var stacy = {
name: 'stacy',
age: 45
};
var languages = ['JavaScript', 'Ruby', 'Python'];
console.log('CALL')
sayName.call(stacy, languages[0], languages[1], languages[2]);
/* .call calls a function with the argument
being the scope we want to call it in */
/* .apply uses the first argument as context and then the following
arguments as variables that it passes in */ /*
console.log('APPLY')
sayName.apply(stacy, languages);
/* .bind is almost like .call but it will return us a new function instead of
invoking the old function
console.log('BIND')
var newFn = sayName.bind(stacy, languages[0], languages[1], languages[2]);
console.log('here!');
newFn();
*/
// new Binding
/* Like creating a new instance of a class in python */
var Animal = function(color, name, type) {
this.color = color;
this.name = name;
this.type = type;
};
var zebra = new Animal('black and white', 'Zorro', 'Zebra');
//console.log(zebra.name);
var sayAge = function () {
//'use strict';
console.log(this.age);
};
//binds this to window if nothing is called so function returns undefined instead of an error
// if I want to avoid this add 'use strict'; to the function
sayAge();
</script>
<script id="jsbin-source-javascript" type="text/javascript">/*
- Implicit Binding
- Explicit Binding
- new Binding
- window Binding
*/
// Implicit Binding (like self in Python)
// Left of the Dot (.) at Call Time
/* this references whatever is to the left
of the dot */
var sayNameMixin = function(obj) {
obj.sayName = function() {
console.log(this.name);
};
};
var me = {
name: 'colton',
age: 30
}
var you = {
name: 'michelle',
age: 31
}
//sayNameMixin(me);
//me.sayName();
// Explicit Binding
// call, apply, bind
/*
var sayName = function (lang1, lang2, lang3) {
console.log('My name is ' + this.name + ' and I know ' + lang1 + ', ' + lang2 + ', and ' + lang3);
};
var stacy = {
name: 'stacy',
age: 45
};
var languages = ['JavaScript', 'Ruby', 'Python'];
console.log('CALL')
sayName.call(stacy, languages[0], languages[1], languages[2]);
/* .call calls a function with the argument
being the scope we want to call it in */
/* .apply uses the first argument as context and then the following
arguments as variables that it passes in */ /*
console.log('APPLY')
sayName.apply(stacy, languages);
/* .bind is almost like .call but it will return us a new function instead of
invoking the old function
console.log('BIND')
var newFn = sayName.bind(stacy, languages[0], languages[1], languages[2]);
console.log('here!');
newFn();
*/
// new Binding
/* Like creating a new instance of a class in python */
var Animal = function(color, name, type) {
this.color = color;
this.name = name;
this.type = type;
};
var zebra = new Animal('black and white', 'Zorro', 'Zebra');
//console.log(zebra.name);
var sayAge = function () {
//'use strict';
console.log(this.age);
};
//binds this to window if nothing is called so function returns undefined instead of an error
// if I want to avoid this add 'use strict'; to the function
sayAge();</script></body>
</html>
Raw
jsbin.vuqovi.js
/*
- Implicit Binding
- Explicit Binding
- new Binding
- window Binding
*/
// Implicit Binding (like self in Python)
// Left of the Dot (.) at Call Time
/* this references whatever is to the left
of the dot */
var sayNameMixin = function(obj) {
obj.sayName = function() {
console.log(this.name);
};
};
var me = {
name: 'colton',
age: 30
}
var you = {
name: 'michelle',
age: 31
}
//sayNameMixin(me);
//me.sayName();
// Explicit Binding
// call, apply, bind
/*
var sayName = function (lang1, lang2, lang3) {
console.log('My name is ' + this.name + ' and I know ' + lang1 + ', ' + lang2 + ', and ' + lang3);
};
var stacy = {
name: 'stacy',
age: 45
};
var languages = ['JavaScript', 'Ruby', 'Python'];
console.log('CALL')
sayName.call(stacy, languages[0], languages[1], languages[2]);
/* .call calls a function with the argument
being the scope we want to call it in */
/* .apply uses the first argument as context and then the following
arguments as variables that it passes in */ /*
console.log('APPLY')
sayName.apply(stacy, languages);
/* .bind is almost like .call but it will return us a new function instead of
invoking the old function
console.log('BIND')
var newFn = sayName.bind(stacy, languages[0], languages[1], languages[2]);
console.log('here!');
newFn();
*/
// new Binding
/* Like creating a new instance of a class in python */
var Animal = function(color, name, type) {
this.color = color;
this.name = name;
this.type = type;
};
var zebra = new Animal('black and white', 'Zorro', 'Zebra');
//console.log(zebra.name);
var sayAge = function () {
//'use strict';
console.log(this.age);
};
//binds this to window if nothing is called so function returns undefined instead of an error
// if I want to avoid this add 'use strict'; to the function
sayAge();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment