JS划重点——类和对象的不正经阐述
JS划重点——类和对象的不正经阐述
/在JS 类里面函数也是一个对象,那么要创建一个对象就需要一个类,这个类可以由这个对牛逼的对象-函数来实现/
/首先是普罗大众都会的 工厂模式来创建一类/
function creates(name,sex,age,b) {
var w = new Object;
w.name = name;
w.sex = sex;
w.age = age;
w.single = b;
w.show = function(){
for (prop in w) {
console.log("w." + prop + " = " + w[prop]);
}
}
return w ;
}
var w1 = creates('啊港','男',21,true)
var w2 = creates('啊财','男',20,false)
w1.show()
w2.show()

/这种方式创建的对象很不好,每次执行都会有一个show函数被创建,可以这样写来解决对各show函数的问题/
function showinfor(){
for (prop in this) {
console.log(this+"." + prop + " = " + this[prop]);
}
}
function creates(name,sex,age,b) {
var w = new Object;
w.name = name;
w.sex = sex;
w.age = age;
w.single = b;
w.show = showinfor
return w ;
}
var w1 = creates('啊港','男',21,true)
var w2 = creates('啊财','男',20,false)
w2.show()
w1.show()

/但看起来就特别别扭,这个show函数一点也不像是对象里面所包含的方法,这就出现了JS的构造函数来解决/
function creatW(name,sex,age,b) {
this.name = name;
this.sex = sex;
this.age = age;
this.single = b;
this.show = function(){
alert(this.name+"使用了构造函数来创建对象")
};
}
var w1 = new creatW('啊港','男',21,true)
w1.show()

/现在可以用new 运算符来创建对象了,里面用的是this,不需要return对象,but 但是这种方式每个对象的shou函数也是不同的和工厂模式同父异母/
/来,邀请原型方式出场/
function w () {
}
w.prototype.name='啊港'
w.prototype.sex='男'
w.prototype.show=function(){
alert(this.name+'使用了原型创建对象')
}
var w1 = new w()
w1.show()

/这种方式每个函数创建的对象都会公用里面的属性和方法,但是使用这种方式不能给函数传参来初始化参数,所以构造加原型模式出场/
function w (name,sex,age,b) {
this.name = name;
this.sex = sex;
this.age = age;
this.single = b;
}
w.prototype.show=function(){
alert(this.name+'使用了构造加原型创建对象')
}
var w1 = new w('啊港','男',21,true)
w1.show()

/这种方式是目前最流行欢迎的创建对象的方式之一,还有一种动态原型创建模式/
function w (name,sex,age,b) {
this.name = name;
this.sex = sex;
this.age = age;
this.single = b;
if(typeof w._initialized == 'undefined'){
w.prototype.show=function(){
alert(this.name+'使用了动态原型创建对象')
}
w._initialized=true
}
}
var w1 = new w('啊港','男',21,true)
w1.show()
var w2 = new w('啊财','男',21,true)
w2.show()

/initialized判断是否给已经给原型赋予了任何方法如果没有就创建,然后赋值为true,之后就不会创建show方法/
JS划重点——类和对象的不正经阐述的更多相关文章
- js中的类和对象以及自定义对象
js中的类 1.类的声明 function Person(name,age){ this.name=name; this.age=age; this.test=function(a){ alert(a ...
- js中有关类、对象的增强函数
javascript中继承的实现 基础实现 function Range(from,to){ this.from =from; this.to =to; } Range.prototype = { i ...
- js中的类数组对象---NodeList
动态 NodeList 这是文档对象模型(DOM,Document Object Model)中的一个大坑. NodeList 对象(以及 HTML DOM 中的 HTMLCollection对象)是 ...
- js中对类和对象的理解
类 :对一群具有相同特征的对象的集合的描述:对象:真实存在的对象个体: **面向对象,而不是面向类. 1.一切皆对象,继承靠原型链,多态靠弱类型,封装--虽然可以靠闭包,但我个人更推崇和python一 ...
- [JS]如何理解JS中的类和对象
-------------------------------------------------------------------------------------------- 变量:自由的 ...
- 11-Js类和对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 浅谈js的类数组对象arguments
类数组对象:arguments总所周知,js是一门相当灵活的语言.当我们在js中在调用一个函数的时候,我们经常会给这个函数传递一些参数,js把传入到这个函数的全部参数存储在一个叫做arguments的 ...
- js之数组,对象,类数组对象
许久不写了,实在是不知道写点什么,正好最近有个同事问了个问题,关于数组,对象和类数组的,仔细说起来都是基础,其实都没什么好讲的,不过看到还是有很多朋友有些迷糊,这里就简单对于定义以及一下相同点,不同点 ...
- JS创建类和对象
JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活 ...
随机推荐
- RSA 2019安全大会:企业资产管理成行业新风向标,云上安全占优势
美国时间3月4-8日,国际知名信息安全峰会RSA Conference在美国旧金山开幕,云安全及云可以为企业提供更可靠的资产管理方式成为大会热点. 此次峰会共吸引全球700多家机构参展,其中近42%为 ...
- oracle 控制结构
1.if 逻辑结构 if/then 结构是最简单的条件测试,如果条件为真,则执行程序的一行或者多行,如果条件为假,则什么都不执行, 示例: if 1>2 then null; end if ; ...
- selenium(3):学习操作元素基本方法
来源:<selenium webdriver基于Python源码案例> 一.打开网页①第一步:从selenium里面导入webdriver模块②打开浏览器(Ie和Chrome对应下面的)③ ...
- java路径中'/'的使用
考虑java的跨系统:uinux和winw7中的‘/'标识方法不同,使用下放语句可避免 File.separator;//代表"/"
- 【POJ 3294】Life Forms
[链接]h在这里写链接 [题意] 给你n个字符串. 让你找最长的字符串s; 这个s在超过一半的子串里面都有出现过且长度大于n/2; 如果有多个,输出多行. (按字典序输出) 也没说会不会出现大写. [ ...
- JQuery--val()、html()、text()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python 代码中的类和对象
- 元素的高度(基于vue)
const viewH =el.target.offsetHeight;//可见高度 const contentH =el.target.scrollHeight;//内容高度 const scrol ...
- swiper踩过的哪些坑
最近,苦恼于各种轮播的需求,每个自己都要自己写,写的挺烦的.终于,在网上发现了swiper插件,发现还是挺实用的,但其中还是踩过了不少的坑,其中有不少都是很简单的问题,但到发现的时候都是花了不少时间, ...
- Nuxt.js打造旅游网站第1篇_项目环境搭建
1. 安装 使用官网提供的脚手架工具 create-nuxt-app,创建一个nuxtjs项目. npx create-nuxt-app xianyun 注意:在NPM版本5.2.0默认安装了npx, ...