JS中的静态属性及实例属性？js控制页面滚动（实例）

本文目录

• JS中的静态属性及实例属性
• js控制页面滚动（实例）
• javascript 对象、实例、函数、方法的区别
• js的静态方法与实例方法
• js里什么叫实例，什么叫实例化
• ExtJs 怎么实现将左侧表中一条数据动态插入到右侧表中
• extjs中所有的函数和变量的定义和实例化都需要写在Ext.onReady里面吗有啥讲究
• 小弟想用Extjs实现文本框中输入用户名，光标离开文本框触发下拉列表从数据库中查询出该用户所能操作的部门
• js实例化对象存在哪里了
• 如何让Extjs4.1中的treegrid和treestore实现分页

JS中的静态属性及实例属性

在回忆怎么判断一个对象是一个数组的方法时，想到了Array.isArray()这个方法，突然有点不理解，这是什么意思，isArray()怎么可以通过Array直接调用，这样的情况很多，比如Object上的方法。
看了几篇文章，简单理解是：JS中有“静态属性”和实例属性。

定义在构造函数上的属性。只能通过构造函数名来调用。
那么就是说，上面的setName方法可以通过Person来调用，不能通过实例调用。因为setName是其内部方法。 举个例子：

通过打印p，可以看到：

可以发现，myName和getAge属性并没有被实例所继承。

我的理解是： 定义在构造函数原型上的属性及在构造函数内部绑定到this上的属性。这些属性可以通过实例对象直接调用。

这个时候，p可以调用name,age,getName这些属性。

可以通过Object.getOwnpropertyNames()等此类方法查看有哪些属性。

js控制页面滚动（实例）

目标描述：多个图片排列下来，按右边的小按钮，抵达相应位置，鼠标滑动，抵达下一图，或者上一图
知识点：onmousewheel，addEventListener，scrollTo，setTimeout

过程：
1.body 宽，高钉死，100vw，100vh，overflow：hidden 使得不出现滚动条，不然不好看
2.图片放进去，排起来，（注意：默认空隙的处理，可以使用flex布局，空隙就不见了）
3.制作相对于视窗的按钮，几张图片就几个按钮，（position: fixed;计算一下高度，可以利用calc计算top使得上下居中）
4.美化一下，css写写
5.先写简单的按钮事件

6.写监听滑动事件(onmousewheel在火狐无效，DOMMouseScroll只在火狐有效)
react在componentDidMount的时候监听

7.补充写一下火狐的

9.测试检查一下。
完成啦，啦啦啦～
我的截图：

缺点：这里我是一直对页面进行监听，导致滑动过快对时候动画效果开始执行对时间延后。体现为滑动对轻，整个就流畅一点。
ps：写这种带计算带页面，我觉得是考验思维的，你可以对这里的知识点不熟练，但是你必须得能理解每一步的加加减减。

javascript 对象、实例、函数、方法的区别

1楼说的没错。没必要区分很清楚。给一个小模型给你看看。
定义一个js类
var jsclass={
funA:function(){},
funB:function(){},
type:’class’
};
调用
var t=new jsclass();
t.funA();

js的静态方法与实例方法

百度到的很多内容都是类似这样的：

然后就很少有然后了，今天突然看到静态方法与实例方法这个词之后，于是有了这篇文章，让我们看看还有什么其他不同。

上边提到静态方法是直接通过属性添加的方法，实例方法是添加给实例化对象的方法。

不难看出，静态方法中的this指向的是构造函数本身，而实例方法中的this指向的是实例化对象。

这里要表达的是实例方法不能通过构造函数直接调用，而静态方法也不能通过实例调用。定义在构造函数内部的形式也是实例方法，表现与原型链添加的方式一致，但并不推荐这种写法。

此外如果是通过原型链进行的继承，那么也不会继承静态方法

有说法静态方法和实例方法对内存的分配也不同，如果实例方法是通过原型链添加的话，我觉得没啥不同（手动狗头）。还望指教。

js里什么叫实例，什么叫实例化

把一个类,变成实际存在的一个"例子",叫实例化. 说白了,如: "人"是一个概念,相当于一个"类" "小明"是一个具体存在的"人"的例子,相当于一个"实例". 把"人"变成"小明"的过程,就是"人的实例化".

ExtJs 怎么实现将左侧表中一条数据动态插入到右侧表中

大致思路：
//声明好对应grid的Record对象
var ItemRecord = Ext.data.Record.create([
{name:’oid’},
{name:’oidname’},
{name:’vendor’}
]);
//点那个添加按钮时则执行类似如下函数
function addRow2Grid(grid){
var values = Ext.getCmp(’your_form_id’).getForm().getValues(); //form各字段的name属性要和ItemRecord里对应以便下面赋值。可以先console.log(values);看看值。
var rec = new ItemRecord(values); //实例化Record对象并赋值
//var rec =new grid.store.recordType(values); //试试这种行不,省了提前声明ItemRecord. grid.store.insert(grid.store.getCount(), rec); //插入作为grid最后一行
grid.getView().refresh(); //刷新
}

extjs中所有的函数和变量的定义和实例化都需要写在Ext.onReady里面吗有啥讲究

当然不是啦。
extjs其本质，依然是js语言。ext.onReady是加载完html与脚本后，脚本自动执行的部分。如果一个页面引用了多个js文件，而且不止一个js文件都有这个函数，那么就按照先后引用个顺序逐个执行，但是一般不推荐这样做。
js是弱语言，没有编译器，只能够解析。所谓的预编译也并非完全检查语法，测试代码。
参考：
***隐藏网址***
另外，百度去，程序猿的唯一利器就是百度(或者谷歌)

小弟想用Extjs实现文本框中输入用户名，光标离开文本框触发下拉列表从数据库中查询出该用户所能操作的部门

你在文本框的代码里加个
listeners:{
blur:function(){
//在这里查数据
store.loadData(data);//然后用下拉列表的store load返回的数据就行
}
}

你试着写写，明天上班有空，我在给你写详细点

js实例化对象存在哪里了

保存在内存里，通过赋值给变量的形式，这样下次就可以通过变量名来访问： var data = { ’name’: ’Sigma’ };再保存持久一点，可以保存到cookie或者localStorage里： var data = { ’name’: ’Sigma’ };
扩展资料：
javascript是一个单线程的语言，但是可以通过代码调度在特定的时间运行。
对于js而言，每个实例化的对象都有以下的方法和属性（也就是说共有的，既然共有那麽就是在原型上的了）：
（1）：constructor，constructor被用来创建对象，比如 var o = new Object();那么constructor 就是 Object()函数。
（2）：hasOwnProperty(propertyname)，这表明如果一个实例化的对象（不是原型）存在给定的属性；注意的是属性名必须是字符串的形式。
（3）：isPrototypeOf(object)，判定一个对象是否是另一个对象的原型。
alert(Person.prototype.isPrototypeOf(person1)); //true
alert(Person.prototype.isPrototypeOf(person2)); //true
（4）：propertyIsEnumerable(propertyname)， 一个给定的属性可以用for-in语句枚举；同hasOwnProperty()一样，属性名必须是字符串。
（5）：toString()：返回对象的字符串形式
（6）：valueOf()：返回一个等于对象的字符串，布尔，字符串的值；这个经常返回和toString()一样的值。

如何让Extjs4.1中的treegrid和treestore实现分页

Extjs treeGrid分页实例，项目中用到，拿出来跟大家分享一下，主要是通过两个store实现。
view plaincopy
ProTreeGrid = Ext.extend(Ext.tree.Panel, {
_baseParam : {
process : ’项目立项’,
isShow : ’true’,
start : 1
},
constructor : function(_config) {
if (_config == null)
_config = {};
Ext.apply(this, _config);

this.store1 = Ext.create(’Ext.data.JsonStore’, {
autoLoad : true,
pageSize : basicConstant.LIMIT,
proxy : {
type : ’ajax’,
url : "xmgl/pro-info-manage!page.action",
extraParams : this._baseParam,
reader : {
type : ’json’,
root : ’rows’,
totalProperty : "totalCount"
}
},
model : ’ProInfo’
});

this.store = Ext.create(’Ext.data.TreeStore’, {
model : ’ProInfo’,
proxy : {
type : ’ajax’,
url : ’xmgl/pro-info-manage.action’
},
folderSort : true,
listeners : {
’beforeload’ : {
fn : function(_s, _op, _e) {
this._baseParam.limit = basicConstant.LIMIT;
_s.proxy.extraParams = this._baseParam;
},
scope : this
}
}
});

this = Ext.create(’Ext.selection.TreeModel’, {
mode : ’SINGLE’,
listeners : {
’selectionchange’ : {
fn : this.selectionChangeHandler,
scope : this
}
}
});
this = [ {
xtype : ’treecolumn’,
text : ’项目性质’,
flex : 1,
sortable : true,
dataIndex : ’proClass’
}, {
text : ’项目名称’,
flex : 2.5,
dataIndex : ’proName’,
sortable : true
}, {
text : ’流程状态’,
flex : .75,
dataIndex : ’process’,
sortable : true
}, {
text : ’项目时间’,
xtype : ’datecolumn’,
format : ’Y-m-d’,
dataIndex : ’crTime’,
sortable : true,
flex : .85
}, {
text : ’项目编号’,
flex : 1,
dataIndex : ’proNo’,
sortable : true
}, {
text : ’项目单位’,
flex : 1,
dataIndex : ’unit’,
sortable : true
}, {
text : ’优先级’,
flex : .6,
dataIndex : ’priority’,
sortable : true
}, {
text : ’项目类型’,
flex : .75,
dataIndex : ’proType’,
sortable : true
}, {
text : ’项目内容’,
flex : 2,
dataIndex : ’proContent’,
sortable : true
}, {
text : ’附件数’,
flex : .6,
dataIndex : ’fileCount’,
sortable : true
} ]
ProTreeGrid.superclass.constructor.call(this, {
useArrows : true,
height : this._height,
width : this._width,
autoScroll : true,
rootVisible : false,
dockedItems : [ {
_treeGrid : this,
xtype : ’pagingtoolbar’,
id : ’PROTREEGRID_PAGEBAR’,
store : this.store1,
dock : ’bottom’,
displayInfo : true,
listeners : {
change : function(obj, pdata, options) {
if(this._treeGrid._baseParam.start==pdata.currentPage)
return;
this._treeGrid._baseParam.start = pdata.fromRecord;
this._treeGrid._baseParam.limit = basicConstant.LIMIT;
this._treeGrid.store.load( {
params : this._treeGrid._baseParam
});
}
}
} ],
viewConfig : {
stripeRows : true,
enableTextSelection : true,
getRowClass : function(record) {
if (record.get("proClass") == ’收入项目’) {
return ’srcss’;
} else if (record.get("proClass") == ’支出项目’) {
return ’zccss’;
}
}
},
tbar : new Ext.toolbar.Toolbar( {
id : ’TBAR_PROTREEGRID’,
items : [ new ProClassQueryCombo( {
width : 140,
labelWidth : 60
}), ’-’, ’项目名称：’, {
xtype : ’textfield’,
width : 70
}, ’无分项总体项目显示：’, {
xtype : ’checkbox’,
checked : true,
width : 70
}, {
text : "查询",
icon : ’images/icons/search.gif’,
handler : this.onSearch,
scope : this
}, {
text : "重置",
icon : ’images/icons/del.gif’,
handler : this.onReset,
scope : this
}, {
text : "高级查询",
icon : ’images/icons/search.gif’,
handler : this.onAdvSearch,
scope : this
} ]
})
});
},
selectionChangeHandler : function() {
},
reLoadData : function() {
this.store.load( {
params : this._baseParam
});
this.store1.load( {
params : this._baseParam
});
},
onSearch : function() {
var _param = {};
var _tbar = Ext.getCmp(’TBAR_PROTREEGRID’);
_param.process = _tbar.items.items.value;
_param.proClass = _tbar.items.items.value;
_param.proName = _tbar.items.items.value;
_param.isShow = _tbar.items.items.value;
// this.store1.load(1);
this._baseParam = _param
this.reLoadData();
},
onReset : function() {
var _tbar = Ext.getCmp(’TBAR_PROTREEGRID’);
_tbar.items.items.setValue(’项目立项’);
_tbar.items.items.setValue(’’);
_tbar.items.items.setValue(’’);
this._baseParam = {
process : ’项目立项’,
isShow : ’false’
};
},
onAdvSearch : function() {
new ProQueryWin( {
_grid : this,
_process : ’项目立项’
}).show();
}

});