网站建设工资,汽车网站页面,施工企业上市公司,拼多多网页设计尺寸构造函数和原型
构造函数和原型
在典型的OOP 的语言中#xff08;如Java#xff09;#xff0c;都存在类的概念#xff0c;类就是对象的模板#xff0c;对象就是类的实例#xff0c;但在ES6之前#xff0c;JS 中并没用引入类的概念。ES6#xff0c;全称ECMAScript6.0…构造函数和原型
构造函数和原型
在典型的OOP 的语言中如Java都存在类的概念类就是对象的模板对象就是类的实例但在ES6之前JS 中并没用引入类的概念。ES6全称ECMAScript6.0 2015.06 发版。但是目前浏览器的JavaScript 是ES5 版本大多数高版本的浏览器也支持ES6不过只实现了ES6 的部分特性和功能。在ES6之前对象不是基于类创建的而是用一种称为构建函数的特殊函数来定义对象和它们的特征。
创建对象可以通过以下三种方式
对象字面量
var obj {// 属性名 属性值// 键值对// 成员name : 张三丰,age : 22,sex : 男,lanqiu : function () {console.log(打篮球);}};// obj.keyvar wahahaobj {}// console.log( obj );// console.log( obj.lanqiu );// console.log( obj.age );// obj.lanqiu();// console.log( obj.name );// console.log( obj[name] );// 遍历对象for ( var key in obj ) {console.log( obj[key] );// console.log( obj.key );}new Object()【构造函数】
构造函数也是函数只不过用法不同需要和new一起使用才有意义就可以new出来一个对象// 构造函数创建对象var o new Object();// console.log( o instanceof Object );// console.log( n instanceof Array );// console.log( o );// 添加属性// 设置对象.属性名 值o.uname 李寻欢;o.age 22;o.fei function () {console.log(’飞飞飞);};// console.log( o.uname );// o.fei();
自定义构造函数
function Person (uname, age) {this.uname uname;this.age age;this.chang function () {console.log(change);}
}// var obj new Person();// console.log(obj);var obj new Person(假冰冰, 22);console.log( obj );var obj1 new Person(刘德华, 17);console.log(obj1);课件练习自定义一个构造函数可以new出一个对象属性姓名年龄性别武器方法打人逃跑function Hero (uname, age, sex, weapon) {this.uname uname;this.age age;this.sex sex;this.weapon weapon;// 方法this.gongji function () {console.log(打打打);}this.pao function () {console.log(跑跑跑赶紧跑eqdfabcdf连气泡);}}// 实例化var hz new Hero(皇子, 16, 男, 矛);// console.log( hz );console.log( hz.uname );hz.pao();工厂模式
构造函数和原型
构造函数是一种特殊的函数主要用来初始化对象即为对象成员变量赋初始值它总与new一起使用。我们可以把对象中一些公共的属性和方法抽取出来然后封装到这个函数里面。function Fn () {}在JS 中使用构造函数时要注意以下两点
1.构造函数用于创建某一类对象其首字母要大写
2.构造函数要和new 一起使用才有意义
练习判断构造函数还是普通函数在使用的时候查看是否与new结合使用new在执行时会做四件事情
在内存中创建一个新的空对象。让this指向这个新的对象。执行构造函数里面的代码给这个新对象添加属性和方法。返回这个新对象所以构造函数里面不需要return。
静态成员和实例成员
JavaScript 的构造函数中可以添加一些成员可以在构造函数本身上添加也可以在构造函数内部的this 上添加。通过这两种方式添加的成员就分别称为静态成员和实例成员。静态成员在构造函数本上添加的成员称为静态成员只能由构造函数本身来访问实例成员在构造函数内部创建的对象成员称为实例成员只能由实例化的对象来访问
function Person (uname, age) {this.uname uname;this.age age;this.say function () {console.log(123);}}var obj new Person(张三丰,22); console.log(obj.uname);// console.log( Person.uname );Person.leibie 人;console.log(Person.leibie);console.log(obj.leibie); ES6字面量构造函数自定义构造函数
new执行过程1.创建空对象2.this指向这个对象3.指向函数里面的代码4.返回这个对象
成员静态成员【Star.sex ‘男’】实例成员【function Star () {成员}】
构造函数小问题
当实例化对象的时候属性好理解属性名属性值那么方法是函数函数是复杂数据类型那么保存的时候是保存地址又指向函数而每创建一个对象都会有一个函数每个函数都得开辟一个内存空间此时浪费内存了那么如何节省内存呢我们需要用到原型方法放到构造函数里面如果多次实例化会浪费内存function Star (uname, age) {this.uname uname;this.age age;this.sing function () {console.log(this.name 在唱歌);}
}var ldh new Star(周星驰, 22);
var ldh new Star(刘德华, 22);构造函数原型prototype
什么是原型对象就是一个属性是构造函数的属性这个属性是一个对象我们也称呼prototype 为原型对象。
每一个构造函数都有一个属性prototype
作用是为了共享方法从而达到节省内存
注意每一个构造函数都有prototype属性
例如大家来学校上学有的开车有的汽车有的开飞机等等此时浪费那么准备一个大巴车方便有节省 构造函数通过原型分配的函数是所有对象所共享的。 JavaScript 规定每一个构造函数都有一个prototype 属性指向另一个对象。注意这个prototype 就是一个对象这个对象的所有属性和方法都会被构造函数所拥有。我们可以把那些不变的方法直接定义在prototype 对 象上这样所有对象的实例就可以共享这些方法。 function Star (uname, age) {this.uname uname;this.age age;// this.sing function () {// console.log(this.name 在唱歌);// }}Star.prototype.sing function () {console.log(this.uname 在唱歌);}var zxc new Star(周星驰, 22);var ldh new Star(刘德华, 22);// console.log( Star.prototype );ldh.sing();zxc.sing();总结所有的公共属性写到构造函数里面所有的公共方法写到原型对象里面
疑问为何创建一个对象都可以自动的跑到原型对象上找方法
因为每一个对象都有一个属性对象原型执行原型对象
对象原型proto
主要作用指向prototype
构造函数和原型对象都会有一个属性____proto____ 指向构造函数的prototype 原型对象之所以我们对象可以使用构造函数prototype 原型对象的属性和方法就是因为对象有__proto__ 原型的存在。 注意____proto____是一个非标准属性不可以拿来赋值或者设置【只读属性】1.____proto____对象原型和原型对象prototype 是等价的2.____proto____对象原型的意义就在于为对象的查找机制提供一个方向或者说一条路线但是它是一个非标准属性因此实际开发中不可以使用这个属性它只是内部指向原型对象prototype总结每一个对象都有一个原型作用是指向原型对象prototype
统一称呼____proto____原型prototype成为原型对象 每一个构造函数都有一个prototype【原型对象】(作用存方法)每一个对象都有一个__proto__对象原型作用指向prototypeconstructor 构造函数 记录是哪个构造函数创建出来的 指回构造函数本身 原型proto和构造函数prototype原型对象里面都有一个属性constructor属性constructor 我们称为构造函数因为它指回构造函数本身。constructor 主要用于记录该对象引用于哪个构造函数它可以让原型对象重新指向原来的构造函数。一般情况下对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法我们可以给原型对象采取对象形式赋值但是这样就会覆盖构造函数原型对象原来的内容这样修改后的原型对象constructor 就不再指向当前构造函数了。此时我们可以在修改后的原型对象中添加一个constructor 指向原来的构造函数。
总结constructor 主要作用可以指回原来的构造函数
构造函数、实例、原型对象三者之间的关系 1、每个构造函数都有一个属性prototype(原型对象)作用存方法节省内存
2、每个对象都有一个属性proto(对象原型)作用指向prototype
3、每个原型对象都有一个属性constructor作用指回构造函数本身
思考如果传入一个对象给原型对象添加方法呢
Star.prototype {sing : function () {},dance: function () {}
};此时会覆盖原先prototype中的内容传入一个新的对象那么此时就不知道构造函数是哪个了
所以我们要指回构造函数constructor构造函数课程回顾
1、创建对象字面量构造函数自定义构造函数
2、new执行过程创建新对象this指向这个对象执行代码返回这个对象
3、静态成员实例成员
构造函数身上的成员称为静态成员只能由构造函数去访问
构造函数内部的成员称为实例成员只能由实例对象去访问
4、原型对象构造函数的一个属性prototype原型对象作用存方法省内存
5、对象原型对象的一个属性(proto)作用指向prototype
6、构造函数constructor作用指回构造函数本身
