JS 各种创建

1、创建函数:

  (1)函数声明:

    function myfun(){};//存在声明得瑟提升,整个函数都会提升

  (2)函数表达式:

    var myfun = function(){}//不存在函数的提升

2、创建对象:

  1)单一对象

    (1)Object构造函数

    

    (2)对象字面量

    

2)创建很多对象:

  (1)工厂模式(不能知道对象的类型)

    function Obj(name,age,job){

      var o = new Object();

      o.name = name;

      o.age = age;

      o.job = job;

      o.say = function(){};

      return o;

    }

    var person1 = Obj(‘‘, ‘‘, ‘‘);

  (2)构造函数模式(以这种方式定义构造函数是定义在global对象上的)

  

  使用 new 关键字创建新实例的步骤:

  (1)创建一个新对象

  (2)将构造函数的作用域赋给新对象(此时this指向新对象)

  (3)执行构造函数中的代码(为这个新对象添加属性)

   (4) 返回新对象。

新对象都有一个constructor属性,该属性只想构造函数,如person1的constructor指向Person

注意:检测对象类型的方法(1)constructor(2)instanceof(会检测出既是object的实例,也是Person的实例)

  (3)原型模式

  

  只要创造一个函数,就会为该函数创建一个 prototype属性,指向函数的原型对象。所有原型对象都会获得一个指向prototype属性所在函数的的指针,即:constructor指针

  如:Person函数的prototype指向Person的原型对象“Person Prototype”.person1 和person2de _proto_指向“Person Prototype”;

    Person Prototype 对象中含有:constructor、name、age、say属性,其中constroctor指向Person

注意:在实例对象中添加一个同原型对象里的谁能够同名的属性时,这个属性就会屏蔽原型对象中的同名属性,换句话说,新添加的属性只会组织我们访问原型对象中的那个属性,而不会修改原型对象中的属性。使用delete可以完全删除实例属性:delete person.name;

  (4)组合使用构造函数和原型模式

    因为原型模式存在引用类型会被修改的问题,所以需要组合使用构造函数模式和原型模式

    构造函数中定义实例属性,原型模式中定义方法和共享属性

时间: 2024-10-05 05:41:30

JS 各种创建的相关文章

用JS动态创建登录表单,报了个小错误

后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各位仁兄美眉们一定要小心了额. 下面是这段js动态创建登录框的js代码: 1 onload = function () { 2 var dvObj = document.createElement('div'); 3 dvObj.style.border = 'Red 1px solid'; 4 dv

一段经典的js命名空间创建和链式调用代码

var YourGlobal = { namespace: function(ns) { var parts = ns.split('.'), object = this, i, len; for(i =0, len=parts.length; i<len; i++) { if(!object[parts[i]]) { object[parts[i]] = {}; } object = object[parts[i]]; } return object; } }; YourGlobal.name

用JS动态创建SVG元素并绑定事件

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("width", "800"); svg.setAttribute("height", "500"); svg.addEventListener("load", function () {

Bounce.js – 快速创建漂亮的 CSS3 动画效果

Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代码. 您可能感兴趣的相关文章 太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 好东西!动感的页面加载动画效果[附源码下载] 使用 CSS3 实现3D图片滑块效果[附源码下载] 时尚设计!三种奇特网格加载效果[附源码下载] 源码下载      在线演示 本文

js中创建html标签、加入select下默认的option的value和text、删除select元素节点下全部的OPTION节点

<pre name="code" class="java"> jsp 中的下拉框标签: <s:select name="sjx" id="sjx" list="sjxList" listKey="BM" listValue="MC" size="20" cssStyle="width:100%;height:70px;

js动态创建及移除div的方法

本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 //创建div function createDiv(){  if(document.getElementByIdx_x("newD")!=null)   document.body.removeChild(document.getElementByIdx_x(&q

js操作创建和操作外部样式的例子

兼容IE8及以上的IE浏览器1. [代码][HTML]代码 <!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <title></title>    </head>    <body>        <div id="test"><

js中创建html标签、添加select下默认的option的value和text

<pre name="code" class="java"> jsp 中的下拉框标签: <s:select name="sjx" id="sjx" list="sjxList" listKey="BM" listValue="MC" size="20" cssStyle="width:100%;height:70px;

Sale.js——快速创建促销样式

小菜编写的又一款jQuery小插件,有兴趣的朋友可以试试~ 简介: 对于一个用于产品展示.销售的网站而言,很可能需要一种促销的特效. 一般而言,我们会在商品图片前加一个促销栏,写上一些促销标语.原价.折扣价等. 如果您的网站比较旧,或者您的新网站没有考虑这个功能,那么后期再加的话,可能需要费一番心思. Sale.js正是为此而生,她可以轻松的帮您添加促销样式,只需要您做很少的事情. 特性: Sale.js依赖jQuery,以jQuery插件的形式封装. Sale.js可以在任意块级元素上添加促销

JS函数创建的具体过程

JS函数创建的过程: 1.新建Object对象F,类型设置为Function 2.设置F.__proto__ = Function.prototype 3.设置F.constructor = Function 4.新建Object对象temp(也就是后来的F.prototype),使temp.constuctor=F,完成函数创建 我只说了表象,复杂的内部实现,等以后再深究了.... 代码表示如下(借用大神代码): F = new Object(); //F.cons F.[[Class]] =