注册网站排名公司红豆影视传媒有限公司

注册网站排名公司,红豆影视传媒有限公司,上海市建设工程信息网,wordpress模板颓废一、构造函数#xff08;完整代码示例#xff09;构造函数就是一个普通函数#xff0c;创建方式和普通函数没有区别#xff0c;不同的是首字母习惯上大写。构造函数和普通函数的区别就是调用方式不同 普通函数直接调用fun()#xff0c;构造函数需要使用new关键字来调用完整代码示例构造函数就是一个普通函数创建方式和普通函数没有区别不同的是首字母习惯上大写。构造函数和普通函数的区别就是调用方式不同 普通函数直接调用fun()构造函数需要使用new关键字来调用var pernew Person();1. 构造函数与普通函数的区别调用方式// 1. 普通函数首字母小写直接调用 function sayHello() { console.log(普通函数调用); this.name 普通函数; // 非严格模式下this指向window } // 普通调用 sayHello(); // 输出普通函数调用 console.log(window.name); // 输出普通函数验证this指向 // 2. 构造函数首字母大写new调用 function Person(name, age) { // 执行流程 // 1. 隐式创建新对象2. this指向新对象3. 执行代码4. 返回新对象 this.name name; this.age age; this.sayHi function() { console.log(我是${this.name}今年${this.age}岁); }; } // 构造函数调用创建实例 const per1 new Person(张三, 20); const per2 new Person(李四, 22); console.log(per1); // 输出Person { name: 张三, age: 20, sayHi: [Function] } per1.sayHi(); // 输出我是张三今年20岁 per2.sayHi(); // 输出我是李四今年22岁 // 3. instanceof检查实例归属 console.log(per1 instanceof Person); // 输出trueper1是Person的实例 console.log(per1 instanceof Object); // 输出true所有对象都是Object的后代 console.log(per1 instanceof Array); // 输出false验证非Array实例构造函数的执行流程1、立刻创建一个新的对象2、将新建的对象设置为函数中的this在构造函数中可以使用this来引用新建的对象3、逐行执行构造函数中的代码4、将新创建的对象作为返回值返回使用同一个构造函数创建的对象属于同一类对象我们也将一个构造函数称为一个类。通过一个构造函数创建的对象称为该类的实例也称为该构造函数的实例。使用instanceof可以检查一个对象是否是一个类的实例所有对象都是Object的后代二、原型prototype完整代码示例我们所创建的每一个函数解析器都会向函数中添加一个属性prototype这个属性对应着一个对象叫原型对象每个函数都有都指向一个不同的原型对象。如果函数作为普通函数调用prototype没有任何作用如果函数以构造函数形式调用时它所创建的对象中都会有一个隐含的属性__proto__指向该构造函数的原型对象我们可以通过__proto__访问该属性。原型对象就相当于一个公共区域所有同一个类的实例都可以访问到这个原型对象。我们可以将对象中共有的内容统一设置到原型对象中。这样不用分别为每一个实例对象添加也不会影响到全局作用域就可以使每个对象中都有这些属性和方法。1. 原型对象的基本使用公共属性 / 方法// 构造函数 function Student(name, score) { this.name name; // 实例自身属性 this.score score; } // 原型对象添加公共方法所有实例共享 Student.prototype.sayScore function() { console.log(${this.name}的成绩是${this.score}分); }; // 原型对象添加公共属性 Student.prototype.school 第一中学; // 创建实例 const stu1 new Student(小明, 90); const stu2 new Student(小红, 85); // 访问实例自身属性 console.log(stu1.name); // 输出小明自身属性 // 访问原型对象的属性/方法 console.log(stu1.school); // 输出第一中学原型属性 stu2.sayScore(); // 输出小红的成绩是85分原型方法 // 验证所有实例共享原型方法内存复用 console.log(stu1.sayScore stu2.sayScore); // 输出true2. 属性查找规则自身 → 原型 → 原型的原型当我们访问对象的一个属性或方法时它会先在对象自身中寻找有直接使用如果没有会去原型对象中找如果找到则直接使用// 接上面的Student构造函数 // 1. 自身有属性优先使用自身 stu1.score 95; console.log(stu1.score); // 输出95自身覆盖原型 // 2. 自身无找原型原型无找原型的原型直到Object原型null console.log(stu1.toString()); // 输出[object Object]来自Object.prototype console.log(stu1.abc); // 输出undefined最终未找到3. in 与 hasOwnProperty 区别使用in检查对象中是否含有某个属性时如果对象中没有但是原型对象中有也会返回true使用对象的hasOwnProperty(name)检查对象自身中是否含有该属性只有对象自身中有时才会返回true。// 接上面的stu1实例 // 1. in自身或原型有则返回true console.log(name in stu1); // 输出true自身有 console.log(school in stu1); // 输出true原型有 console.log(toString in stu1); // 输出trueObject原型有 // 2. hasOwnProperty仅自身有则返回true console.log(stu1.hasOwnProperty(name)); // 输出true自身有 console.log(stu1.hasOwnProperty(school)); // 输出false原型有 console.log(stu1.hasOwnProperty(toString)); // 输出falseObject原型有4. 原型链示例多层原型查找// 自定义构造函数 function Animal(type) { this.type type; } // Animal原型添加方法 Animal.prototype.eat function() { console.log(${this.type}会吃东西); }; // Dog继承Animal简化版仅演示原型链 function Dog(name) { this.name name; } // 将Dog的原型指向Animal的实例形成原型链 Dog.prototype new Animal(狗); // 创建Dog实例 const dog1 new Dog(旺财); // 原型链查找 // dog1自身 → Dog.prototypeAnimal实例 → Animal.prototype → Object.prototype → null console.log(dog1.name); // 自身旺财 dog1.eat(); // Animal.prototype狗会吃东西 console.log(dog1.toString()); // Object.prototype[object Object] console.log(dog1.xxx); // 输出undefined最终未找到三、完整整合示例构造函数 原型 原型链原型对象也是对象所以它也有原型。当我们使用一个对象的属性或方法时会先在自身中寻找。自身中如果有直接使用如果没有则去原型对象中找如果原型对象中有则直接使用如果没有则去原型对象中的原型去找直到找到Object对象的原型。Object对象的原型没有原型对应的值为null如果还没有找到则返回undefined。// 1. 定义构造函数 function Car(brand, color) { // 实例自身属性 this.brand brand; this.color color; } // 2. 原型添加公共方法所有Car实例共享 Car.prototype.run function() { console.log(${this.color}的${this.brand}正在行驶); }; // 原型添加公共属性 Car.prototype.wheels 4; // 3. 创建实例 const car1 new Car(宝马, 白色); const car2 new Car(奔驰, 黑色); // 4. 访问属性/方法 console.log(car1.brand); // 自身白色 console.log(car1.wheels); // 原型4 car2.run(); // 原型方法黑色的奔驰正在行驶 // 5. 检查属性归属 console.log(wheels in car1); // true原型有 console.log(car1.hasOwnProperty(wheels)); // false自身无 console.log(car1.hasOwnProperty(brand)); // true自身有 // 6. 原型链验证 console.log(car1.__proto__ Car.prototype); // true实例的__proto__指向构造函数原型 console.log(Car.prototype.__proto__ Object.prototype); // true原型的原型指向Object原型 console.log(Object.prototype.__proto__); // nullObject原型无原型四、核心总结构造函数通过new调用自动创建 / 返回对象this指向实例原型prototype是构造函数的属性存储实例共享的属性 / 方法减少内存占用属性查找遵循「自身 → 原型 → 原型链」规则直到Object.prototype.__proto__nullin检查整个原型链hasOwnProperty仅检查实例自身。