OneCompiler

Javascript Call, Apply, Bind

"use strict"

<!--// javascript call, apply, bind practice--> <!--for use read uncommand & apply--> <!--// create constractor function-->

class Product{
constructor(name,price){
this.name = name;
this.price = price;
}
// for use uncommand 1
<!--getProduct(){-->
<!-- return document.write(`The product name is ${this.name} price is ${this.price}<hr>`)-->
<!-- }-->
}

<!--normal function call use (this)-->

// for use uncommand 1

<!--let item1 = new Product("Xioami", 20000);--> <!--item1.getProduct(); // Product name is xioami price is 20000;--> <!--// use (call) function -->

// for use uncommand 2

<!--let getProduct1 = function(callPara1,callPara2){--> <!-- return document.write(`The product name is ${this.name} price is ${this.price},, ${callPara1} ${callPara2}<hr>`)--> <!-- }--> <!--let item2 = new Product("Realme",18000);--> <!-- getProduct1.call(item2,"call function send parameter ","using couma"); // call item1--> <!--item2.getProduct1(); //The product name is Realme price is 18000,, call function send parameter using couma--> <!--// use (apply) function -->

// for use uncommand 3

<!--let getProduct2 = function(apply1,apply2){--> <!-- return document.write(`The product name is ${this.name} price is ${this.price},, ${apply1} ${apply2}<hr>`)--> <!-- }--> <!--let item3 = new Product("Rog",40000);--> <!-- getProduct2.apply(item3,["call function send parameter ","using Array"]) // apply item2--> <!--item3.getProduct2(); // function call--> <!--// use (bind) return new function -->

// for use uncommand 4
let getProduct2 = function(apply1,apply2){
return document.write(The product name is ${this.name} price is ${this.price},, ${apply1} ${apply2}<hr>)
}
let item4 = new Product("iphone",800000)
let newBindFun = getProduct2.bind(item4);
console.log(item4);
newBindFun('bind return','new function')