New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
2. 手写new和bind #2
Comments
new测试案例: // 测试 1
function Otaku(name, age) {
this.name = name;
this.age = age;
this.habit = "Games";
return null;
// return 1
// return '1'
// return true
// return {}
// return function(){}
// return /a/
}
Otaku.prototype.strength = 60;
Otaku.prototype.sayYourName = function () {
console.log("I am " + this.name);
};
// 测试2
Otaku.prototype = null;
var person1 = new Otaku("Kevin", "18");
var person2 = objectFactory(Otaku, "Kevin", "18");
console.log(person1, person2);
console.log(person1.name, person2.name); // Kevin
console.log(person1.habit, person2.habit); // Games
console.log(person1.strength, person2.strength); // 60
person1.sayYourName(); // I am Kevin
person2.sayYourName(); // I am Kevin 实现: function objectFactory(ctor, ...args) {
if(typeof ctor !== 'function') {
throw TypeError('ctor is not a function');
}
var obj = {}
// 处理 ctor.prototype 为 null 的情况
obj.__proto__ = ctor.prototype instanceof Object ? ctor.prototype : Object.prototype;
var res = ctor.apply(obj, args);
var isObject = typeof res === 'object' && res !== null;
var isFunction = typeof res === 'function';
return isObject || isFunction ? res : obj;
} |
bind测试案例: // 测试 1
var foo1 = {
value: 1,
};
function bar1() {
console.log(this.value);
}
// 返回了一个函数
var bindFoo1 = bar1.myBind(foo1);
bindFoo1(); // 1
// 测试 2
var foo2 = {
value: 1,
};
function bar2() {
return this.value;
}
var bindFoo2 = bar2.myBind(foo2);
console.log(bindFoo2()); // 1
// 测试 3
var foo3 = {
value: 1,
};
function bar3(name, age) {
console.log(this.value);
console.log(name);
console.log(age);
}
var bindFoo3 = bar3.myBind(foo3, "daisy");
bindFoo3("18");
// 测试 4
var value4 = 2;
var foo4 = {
value4: 1,
};
function bar4(name, age) {
this.habit = "shopping";
console.log(this.value4);
console.log(name);
console.log(age);
}
bar4.prototype.friend = "kevin";
var bindFoo4 = bar4.myBind(foo4, "daisy");
var obj4 = new bindFoo4("18");
console.log(obj4.habit);
console.log(obj4.friend);
// 测试 5
var value5 = 2;
var foo5 = {
value5: 1,
bar5: bar5.myBind(null),
};
function bar5() {
console.log(this.value5);
}
foo5.bar5(); // 2 实现: Function.prototype.myBind = function (context, ...outerArgs) {
if(typeof this !== 'function') {
throw TypeError('this is not a function')
}
var self = this;
var fNOP = function() {}
var fBind = function(...innerArgs) {
return self.apply(this instanceof self ? this : context, outerArgs.concat(innerArgs));
}
fNOP.prototype = this.prototype;
fBind.prototype = new fNOP();
return fBind;
}; |
newfunction objectFactory(cotr, ...args) {
//判断边界
if (typeof cotr !== 'function') {
throw TypeError('cotr is not a function !');
}
// #1.创建一个空对象
const obj = {} //new Object()
// #2.将新对象的原型对象指向cotr的原型对象
obj.__prop__ = ctor.prototype; //Object.prototype(ctor.prototype)基于目标对象再创建出一个实例
// #3.将构造函数的this指向新对象
let res = ctor.apply(obj, [...args]);//获取所有属性
let isObject = typeof res === 'object' && res != null;
let isFunction = typeof res === 'function';
// 4.根据返回值判断
return isObject || isFunction ? res : obj;
} bindFunction.prototype.myBind = function (context) {
//判断调用对象是否为函数
if (typeof this !== 'function') {
throw new TypeError('Function.prototype.bind -what is trying to be bound is not callable!')
}
console.log("111", this, context);
//获取参数
const args = [...arguments].slice(1),
self = this;
return function Fn() {
console.log("222", this);
self.apply(this instanceof Fn ? new self(...arguments) : context, [...args, ...arguments]);
}
} ---后面再补注释 |
手写new老规矩,写在注释里 /**
* new,后面跟一个构造函数,返回一个对象
* 具体步骤
* 1. 创建一个新对象
* 2. 新对象原型,指向构造函数原型
* 3. 使用call/apply显示执行构造函数,获取一个返回值
* 4. 如果返回值是一个对象,则返回该对象,如果不是一个对象或者没有返回值,则返回新对象
*/
function objectFactory(Ctor, ...args) {
const obj = new Object();
Object.setPrototypeOf(obj, Ctor.prototype);
// obj.__proto__.constructor = Ctor;
const res = Ctor.apply(obj, args);
return Object.prototype.toString.call(res).slice(8, -1) === "Object"
? res
: obj; // 如果用typeof,会包含null,而new对于返回null的构造函数是会返回新对象
}
// 测试1,返回null
function testFunc() {
this.name = "hhh";
return null;
}
// const res = new testFunc();
// console.log(res);
const res = objectFactory(testFunc);
console.log(res);
// 测试2,返回基本类型
function testFunc2() {
this.name = "ooo";
return 1;
}
// const res2 = new testFunc2();
// console.log(res2);
const res2 = objectFactory(testFunc2);
console.log(res2);
// 测试3,返回一个对象
function testFunc3() {
this.name = "www";
return {
aaa: "bbb",
};
}
// const res3 = new testFunc3();
// console.log(res3);
const res3 = objectFactory(testFunc3);
console.log(res3); |
BindFunction.prototype.myBind = function (context = window, ...args) {
const self = this
return function () {
return self.apply(context, args.concat(Array.from(arguments)))
}
}
function test() {
console.log(arguments);
console.log(this);
return '我是david'
}
let obj = {
name: 'jerry',
age: 12
}
test.myBind(obj, 1, 2, 3)(4, 5, 6) newfunction _new(obj, ...rest) {
// 基于obj的原型创建一个新的对象 继承父类原型上的方法
const newObj = Object.create(Object.getPrototypeOf(obj));
// 添加属性到新创建的newObj上, 并获取obj函数执行的结果.
const result = obj.apply(newObj, rest);
// 如果执行结果有返回值并且是一个对象, 返回执行的结果, 否则, 返回新创建的对象
return typeof result === 'object' ? result : newObj;
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
先来两篇羽哥大大的文章镇场子
老规矩,我们先的知道这个api的场景是什么
一句话介绍 new运算符号:
new
一句话介绍 bind:
bind()
题目:
The text was updated successfully, but these errors were encountered: