JavaScript進級【四】JavaScriptにおけるthis,apply,callの深い剖析
68920 ワード
/span>html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
var obj = {
a: 1,
getA: function () {
alert(this == obj); // true
alert(this.a); //1
}
}
obj.getA();
// 2.
window.name = "gloabalName";
var getName = function () {
// this window
return this.name;
}
var myObject = {
name: "xiuxiu",
getNameA: function () {
// this myObject
alert(this); // window
return this.name;
}
}
console.log(getName());
var a = myObject.getNameA; //globalName
//console.log(a); // xiuxiu
console.log(a());
var innerText = " innerText";
// callback
var button = document.createElement("button");
button.innerText = " ";
button.id = "btn";
document.body.appendChild(button);
button.onclick = function (ev) {
// that , that button
var that = this;
// alert(this); button
// this
console.log(this.innerText);
var callback = function () {
// this window
// ： ES5 strict ，this ， undefined
console.log(this.innerText); //undifined
// that ， window
console.log(that.innerText);
}
callback();
}
//3.
// this
var myClass = function (name, sex) {
this.name = name;
this.sex = sex;
alert(this.name + " " + this.sex);
};
var male = new myClass("xiaohong", "male");
var myClass = function (name) {
//console.log(this.name); //undifined
this.name = name;
console.log(this.name + " " + name);
// ， name
return {
name: "hahaha"
}
}
var cls = new myClass("xiuxiu");
alert(cls.name);
// 4）Function.prototype.call Function.prototype.apply
// ， Function.prototype.call Function.prototype.apply this
var obj1 = {
name: "xiuxiu",
getName: function () {
return this.name;
}
}
var obj2 = {
name: "Jack"
}
console.log(obj1.name); // xiuxiu
console.log(obj1.getName.call(obj2)); // jack
var obj3 = {
myname: "seven",
getName: function () {
return this.myname;
}
}
// this obj3
console.log(obj3.getName()); // seven
// this
// getname2 ， this window
// getname2
var getname2 = obj3.getName;
alert(getname2()); //undifined
// document.getElementById
var getId = function (id) {
//alert(this); // this widnow
return document.getElementById(id);
}
var id = getId("btn");
console.log("id:" + id); // ButtonElement
// this document
//var getId = document.getElementById;
//id = getId("btn");
//console.log("id:"+id); // this .html?_ijt=7mjupf008evikdgvnqbeddk23d:146 Uncaught TypeError: Illegal invocation
// this
document.getElementById = (function (func) {
return function () {
// func documen
return func.apply(document, arguments);
}
})(document.getElementById);
var getId = document.getElementById;
var button = getId("btn");
console.log(button); //
console.log(button.id);
// 、call apply
var func = function (a, b, c) {
"use strict";
// this
alert(this);
console.log([a, b, c]);
}
// ƒ (a, b, c) {
/*console.log([a, b, c]);
}*/
console.log(func);
// func()
console.log(func()); // undifined
// apply this ， , window, document
// this ， ，
func.apply(null, [1, 2, 3]); // this window
// "use strict" this null, window
func.apply(null, [1]); // this window
// null， this 。 window
func.apply(null, [0, 1]); // this window
//console.log(func());
func.apply(document, [0, 1, 2]); // this document
func.apply(this, [0, 1]); // this window
//
console.log(Math.max.apply(null, [1, 2, 3]));
console.log(Math.max(1, 2, 3));
// 、call apply
// 1.） this
var obj1 = {
//alert(this);
name: "seven"
}
var obj2 = {
//alert(this);
name: "haha"
}
window.name = "window";
var getName = function () {
console.log(this.name);
}
//
getName(); // this window
getName.call(obj1); // this obj1
getName.call(obj2); // this obj2
//
document.addEventListener("click", function (ev) {
// this
console.log(this); // document
function Add(a, b) {
console.log(this);
}
// ，thisz window
Add(10, 1); // window
// this
// this
Add.call(this); // document
});
// 2).Function.prototype.bind
// Function.prototype.bind, this
Function.prototypebind = function (context) {
var self = this;
return function () {
console.log(context+"is"+ this);
// this（self） context
return self.apply(context, arguments);
}
}
var obj = {
name: "xiuxiuDesign"
}
var getName = function () {
// this obj
console.log(this.name);
}.bind(obj);
getName();
// 3).
var A = function (name) {
this.name = name;
}
var B = function () {
// A this B
A.apply(this, arguments);
// Arguments ["xiuxiu is a good man", callee: ƒ, Symbol(Symbol.iterator): ƒ]
console.log(arguments);
}
B.prototype.getName = function () {
//
return this.name;
}
var b = new B("xiuxiu is a good man");
console.log(b.getName());
// argumments ， Array.prototype.push
(function () {
Array.prototype.push.call(arguments, 3);
console.log(arguments);
})(1, 2, 1, 3)
// arguments ， Array.prototype.slice ， arguments ， Array.prototype.shift ， ， V8 ， Array.prototype.push
var a = {};
// Array ， push this a ， a
Array.prototype.push.call(a, 'first');
Array.prototype.push.call(a, 'second');
// Array push , this a
console.log(a.length);
console.log(a[0]);
// JavaScript
var AA = function (name, age) {
this.name = name;
this.age = age;
}
AA.prototype = {
getName : function () {
alert(this.name);
}
}
var BB = function () {
}
// BB AA
BB.prototype = new AA("AAA", 19);
var aa = new AA("xiuxiu", 18);
console.log(aa.name +" "+aa.age); // xiuxiu, 18
var bb = new BB();
console.log(bb.name+" "+bb.age); // AAA 19
script>
body>
html>