JS中的prototypeproto与constructor

1. 寻找原型心法口诀:每个对象的原型(__proto__)都指向自身的构造函数(constructor)的prototype属性let b={}b.constructor === Object// trueb.__proto__ === Object.prototype// trueb.__proto__ === b.constructor.prototype// true所以想要知道某个对象的原型是什么,首先找到他的构造函数是什么9个终极类Array.constructor// ƒ Function() { [native code] }Boolean.constructor// ƒ Function() { [native code] }Date.constructor// ƒ Function() { [native code] }Number.constructor// ƒ Function() { [native code] }String.constructor// ƒ Function() { [native code] }Object.constructor// ƒ Function() { [native code] }RegExp.constructor// ƒ Function() { [native code] }Symbol.constructor// ƒ Function() { [native code] }1个究极类Function.constructor// ƒ Function() { [native code] }3中特殊数字对象Math.constructor// ƒ Object() { [native code] }// Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math()NaN.constructor// ƒ Number() { [native code] }Infinity.constructor// ƒ Number() { [native code] }2中bug类型undefined.constructor// VM25366:1 Uncaught TypeError: Cannot read property 'constructor' of undefined at <anonymous>:1:11null.constructor// VM25366:1 Uncaught TypeError: Cannot read property 'constructor' of null at <anonymous>:1:11... ...

June 26, 2019 · 1 min · jiezi

详解ES6中的class基本概念

用构造函数,生成对象实例: 使用构造函数,并且new 构造函数(), 后台会隐式执行new Object() 创建对象将构造函数的作用域给新对象,(即new Object() 创建出的对象),函数体内的this代表new Object() 出来的对象执行构造函数的代码返回新对象( 后台直接返回)function Person1(name, age) { this.name = name this.age = age}Person1.prototype.say = function () { return "My name is " + this.name + ", I'm " + this.age + " years old."}var obj = new Person1("Simon", 28);console.log(obj.say()); // My name is Simon, I'm 28 years old.用class改写上述代码: 通过class关键字定义类,使得在对象写法上更清晰,让javascript更像一种面向对象的语言在类中声明方法的时,不可给方法加function关键字class Person2 { // 用constructor构造方法接收参数 constructor(name, age) { this.name = name; // this代表的是实例对象 this.age = age; } // 类的方法,此处不能加function say() { return "My name is " + this.name + ", I'm " + this.age + " years old." }}var obj = new Person2("Coco", 26);console.log(obj.say()); // My name is Coco, I'm 26 years old.ES6中的类,实质上就是一个函数类自身指向的就是构造函数类其实就是构造函数的另外一种写法console.log(typeof Person2); // functionconsole.log(Person1 === Person1.prototype.constructor); // trueconsole.log(Person2 === Person2.prototype.constructor); // true构造函数的prototype属性,在ES6的class中依然存在:// 构造1个与类同名的方法 -> 成功实现覆盖Person2.prototype.say = function () { return "证明一下:My name is " + this.name + ", I'm " + this.age + " years old."}var obj = new Person2("Coco", 26);console.log(obj.say()); // 证明一下:My name is Coco, I'm 26 years old.// 通过prototype属性对类添加方法Person2.prototype.addFn = function () { return "通过prototype新增加的方法addFn"}var obj = new Person2("Coco", 26);console.log(obj.addFn()); // 通过prototype新增加的方法addFn通过Object.assign方法来为对象动态增加方法:Object.assign(Person2.prototype, { getName: function () { return this.name; }, getAge: function () { return this.age; }})var obj = new Person2("Coco", 26);console.log(obj.getName()); // Cococonsole.log(obj.getAge()); // 26constructor方法是类的构造函数的默认方法new生成对象实例时,自动调用该方法class Box { constructor() { console.log("自动调用constructor方法"); // 实例化对象时,该行代码自动执行 }}var obj = new Box();若没有定义constructor方法,将隐式生成一个constructor方法: ...

May 30, 2019 · 2 min · jiezi